Question

我在HTML页面上直接使用名为navigation.component.ts的文件中定义的组件时遇到了困难。如果我在app.component.ts上定义的组件的模板下使用它，则相同的组件可以正常工作。

app.module.ts的内容

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { NavigationComponent} from './shared/navigation.component';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent, NavigationComponent],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

navigation.component.ts的内容

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

 @Component({
     selector: 'navigation',
     templateUrl: '/views/shared/navigation.html'
 })

 export class NavigationComponent {
     userName: string = 'Anonymous';
 }

app.component.ts的内容

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

 @Component({
     selector: 'main-app',
     template: '<navigation></navigation><h1>{{pageTitle}}</h1>'
 })

 export class AppComponent {
     pageTitle: string = 'Portal 2.0';
 }

index.html的内容

  <body>
        <main-app></main-app>
  </body>

上面的工作和渲染菜单位于顶部，但是当我尝试直接使用<navigation>时（下面给出）它没有呈现它，也没有显示任何错误。

  <body>
        <navigation></navigation>
  </body>

我做错了吗？

更大的问题是我如何调试这样的问题？

Answer 1

是的，您可以使用Web组件。将要加载的所有组件添加到entrycomponents。使用createCustomElement可以创建元素并在任何地方使用它们的选择器。

    TASK  ID 323
    ME mohitharshan123 
    MY MENTOR rohitharshan
    GETTING ID 323
    notification mohitharshan123 Completed new Task safasfa

我不能直接使用HTML中app.component.ts以外的文件中定义的组件吗？

1 个答案: