Нельзя использовать компонент, определенный в файле, отличном от приложения.деталь.ts в HTML напрямую?

Я столкнулся с трудностями при использовании компонента, определенного в файле с именем navigation.деталь.ts непосредственно на HTML-странице.
Тот же компонент прекрасно работает, если я использую его под шаблоном компонента, определенного в приложении.деталь.ts.

Содержание приложения.модуль.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 { }

Содержание навигации.деталь.ts

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

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

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

Содержание приложения.деталь.ts

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

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

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

Содержание индекса.формат html

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

Выше работает и визуализирует меню на вершине, но когда я пытаюсь использовать <navigation>напрямую (приведено ниже), он не визуализирует его, не показывает никаких ошибок.

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

Я делаю что-то не так?

И большой вопрос, как я иду отладка проблемы, как это?

1 ответ

  1. Да можно использовать веб-компоненты. Добавьте все компоненты, которые вы хотите загрузить в entrycomponents.
    С помощью createCustomElement можно создавать элементы и использовать их селектор в любом месте.

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule, Injector } from '@angular/core';
    import { createCustomElement } from '@angular/elements';
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule
      ],
      providers: [],
      entryComponents: [AppComponent]
    })
    export class AppModule {
      constructor(private injector: Injector) {
        console.log('Elements is loaded: Activation');
        this.registerComponent('metro-activation-loader', AppComponent);
      }
    
      public ngDoBootstrap(): void {
        console.log('Elements is loaded: Activation ngDoBootstrap');
       }
    
      // tslint:disable-next-line:no-any
      private registerComponent(name: string, component: any): void {
        const injector = this.injector;
        const customElement = createCustomElement(component, { injector });
        customElements.define(name, customElement);
      }
    }