Angular 2不会在模板中呈现自定义标签html
问题描述:
我有一个奇怪的行为与角度2. 其实,我的应用程序是非常简单的。它有一个名为kys-app的主页面组件。在那里,我将模板html指定为kys-app.html。 html也很简单。它有四个部分,标题,侧菜单,页脚和主要内容。页眉,页脚和sidemenu有他们自己的模板htmls,这些模板是在他们自己的组件文件中定义的。 (header.ts,footer.ts和sidemenu.ts)。 主要内容预计将显示在router-outlet中。 这里是KYS-app.ts:Angular 2不会在模板中呈现自定义标签html
import { Component, OnInit, Input, Injectable, Inject, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { Router, RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HttpModule, XHRBackend } from '@angular/http';
//import { HeaderComp } from '../../components/app/header';
import { FooterComp } from '../../components/app/footer';
//import { SideMenuComp } from '../../components/app/side-menu';
//import { AuthGuard } from '/app/services/auth-guard';
@Component({
imports: [ HttpModule, RouterModule ],
selector: 'kys-app',
templateUrl: '/app/components/app/kys-app.html',
directives: [ FooterComp ],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
// providers: [ {provide: Router, useClass: RouterModule} ]
})
export class KYSAppComp {
constructor() {
console.log(' %% KYSAppComp %%');
}
}
我的KYS-app.html内容如下:
<!-- Main Content -->
<section class="content-wrap">
<div class="card-panel">
<router-outlet></router-outlet>
<!-- Footer -->
<kys-footer></kys-footer>
</div>
</section>
<!-- /Main Content -->
注:为了简化它,暂时我删除页眉和sidemenu组件目前。 因此,当我访问主页面时,我期望看到router-outlet部分中的主要内容以及它下面的页脚内容。
我所看到的是:虽然主要内容(我通过路由器路径访问的组件的内容(例如:/#/ login))正确显示,但其他部分的kys-app不是被显示(例如页脚内容)。换句话说,angular 2不会呈现在kys-app(例如:)中定义的自定义标签。 任何人都可以看看上面的代码,并告诉我我可能做错了什么? 提前感谢和问候
答
imports: []
需要去@NgModule()
,它是无效的@Component()
同样与directives: [ FooterComp ],
,这应该是
@NgModule({
imports: [ HttpModule, RouterModule ],
declarations: [ FooterComp ],
你似乎以某种方式混合2.0.0最终以预发布2.0.0最终样式。 请查阅angular.io上的文档以获取更多详细信息,了解如何创建组件和模块。
以前,当我遇到这种问题时,添加模式:[CUSTOM_ELEMENTS_SCHEMA]已经解决了这个问题。但是这次它没有任何区别。另外,我还尝试使用声明:[FooterComp]而不是指令,它也不起作用。 – Yilmaz
这里是我的footer.ts,以防你可能想看到它:\t \t \t \t import @ Component/CUSTOM_ELEMENTS_SCHEMA} from @ angular/core'; \t \t \t \t @Component({ \t \t \t \t \t选择: 'KYS尺', \t \t \t \t \t templateUrl:“/应用/组件/应用程序/页脚。HTML”, \t \t \t \t \t模式:[CUSTOM_ELEMENTS_SCHEMA] \t \t \t \t}) \t \t \t \t出口类FooterComp { \t \t \t \t构造(){ \t \t \t \t \t \t的console.log ('%% FooterComp %%'); \t \t \t \t \t \t \t \t \t \t \t \t} \t \t \t \t \t} – Yilmaz