如何解决在使用选择器app-home添加组件HomeComponent之后，当我在Visual Studio 2017中运行ASP.NET MVC项目时，看不到app-home
当我使用ng g Component Home使用GIT将组件添加到我的ASP.NET MVC项目中，并在index.cshtml中使用选择器app-home时，没有任何反应。
这是home.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-home',template: '',})
export class HomeComponent { name = 'Home'; }
这是_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<!-- polyfill(s) for older browsers -->
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="/systemjs.config.js"></script>
<script>System.import('/src/app/main.js').catch(function(err){ console.error(err); });</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name","Index","Home",new { area = "" },new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home","Home")</li>
<li>@Html.ActionLink("About","About","Home")</li>
<li>@Html.ActionLink("Contact","Contact","Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<my-app></my-app>
<app-home></app-home>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts",required: false)
</body>
</html>
这是home.component.html
<p>home works!</p>
为什么？
解决方法
此问题通过在app.module.ts中添加bootstrap: [HomeComponent]来解决
文件就是这样
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HomeComponent } from './home/home.component';
@NgModule({
imports: [AppComponent,BrowserModule],declarations: [HomeComponent],bootstrap: [AppComponent]
})
export class AppModule { }
当我将其更改为
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HomeComponent } from './home/home.component';
@NgModule({
imports: [BrowserModule],declarations: [AppComponent,HomeComponent],bootstrap: [AppComponent,AppComponent]
})
export class AppModule { }
一切正常
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
