Угловые 6 динамических компонентов - PullRequest
Новая
       5

Угловые 6 динамических компонентов

0 голосов
/ 13 сентября 2018

Я работаю над проектом, в котором мне нужно динамически создать компонент и добавить его на вкладку, но изначально я создал небольшой проект с двумя компонентами и хочу динамически загрузить эти два компонента внутри div

App.module.ts 

import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';import{RouterModule, Router, NavigationEnd, ActivatedRoute}from "@angular/router";
import { AppComponent } from './app.component';
import { TestOne, TestTwo } from './my.component';

@NgModule({
  declarations: [
    AppComponent,
    TestOne,
    TestTwo
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(
      [{
        path:"first",component:TestOne
      },{
        path:"second",component:TestTwo
      }]
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { 



}

my.component.ts 

import { Component } from "../../node_modules/@angular/core";

@Component({
    selector: 'test-one',
    template: '<p>Test One</p>'
  })
  export class TestOne {}

  @Component({
    selector: 'test-two',
    template: '<p>Test Two</p>'
  })
  export class TestTwo {}

app.component.ts 

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '../../node_modules/@angular/router';
import { TestOne, TestTwo } from './my.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  entryComponents:[TestOne,TestTwo]
})
export class AppComponent {
  title = 'app';
  @ViewChild('container', { read: ViewContainerRef }) _vcr:ViewContainerRef;


constructor(private componentFactoryResolver: ComponentFactoryResolver,
  private route:ActivatedRoute,private router:Router){
    router.events.subscribe(e => {
      if(e instanceof NavigationEnd){
        console.log((<any>route.firstChild.component).name);
        let componentFactory = this.componentFactoryResolver.resolveComponentFactory((<any>route.firstChild.component).name);
        this._vcr.createComponent(componentFactory);
      }
    });

  }
}

app.component.html 

<ul>
  <li>
    <h2><a routerLink="/first">test one</a></h2>
  </li>
  <li>
    <h2><a routerLink="/second">test two</a></h2>
  </li>
  <div #container></div>
</ul>

Я получаю сообщение об ошибке: ОШИБКА в TestOne не может быть использована в качестве компонента ввода.

Я добавил эти два компонента как entryComponents в app.module,а также в app.components, но каждый раз, когда я сталкиваюсь с одной и той же проблемой.

Может кто-нибудь, пожалуйста, дайте мне знать, что мне не хватает?

...