如何在 Angular 4 中的打字稿文件中的模板 url 中传递 mvc 视图答案

【问题标题】：How to pass mvc view in template url in type script file in angular 4如何在 Angular 4 中的打字稿文件中的模板 url 中传递 mvc 视图
【发布时间】：2017-12-06 13:30:48
【问题描述】：

我在 mvc 架构中使用 angular 4。当我在 app.component.ts 文件的模板 url 中传递 mvc 视图时，它会显示一些错误。我可以在类型脚本文件中传递 mvc 视图还是必须在 app 文件夹中创建一个 html 文件。

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: '/Home/Index.cshtml',
})
export class AppComponent  {
    name = '';
}

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="Registeration">
    <my-app>Loading AppComponent content here ...</my-app>
    <input type="text" [(ngmodel)]="name"/>
    <p>{{name}}</p>
 
</div>

【问题讨论】：

你在使用 angular-cli 吗？
我是 angular 4 的新手。我已经运行了 angular cli 命令，以便在 Visual Studio 解决方案中设置 Angular 4。
你想做什么？
阅读，可能对stackoverflow.com/questions/35762515/is-angular2-mvc有帮助
我只想将 app.component.ts 文件用于 index.cshtml 。而且我认为我将视图传递到模板 url 的方式不正确。我的意思是在模板 url 中传递 mvc 视图的正确方法。就像我们可以在模板 url 中传递 html 文件，如下 './app.component.html'

标签： javascript angular

【解决方案1】：

可能的解决方案

app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css']
})

app.component.html

<child-cmp></child-cmp> <------ selector of child component

child.component.ts

@Component({
  selector: 'child-cmp',         <----pass this selector to view this component
  templateUrl: './child.component.html', 
  styleUrls: ['./child.component.css']
})

name = 'child';

将 index.cshtml 文件放入 child.component.html

child.component.html

<div id="Registeration">   
    <input type="text" [(ngmodel)]="name"/>
    <p>{{name}}</p>
</div>

【讨论】：