Question

我想通过ngComponentOutlet指令创建动态组件。我搜索了几乎所有的网页，但我找不到具体的问题。

问题：如何动态创建组件的ActivatedRoute依赖关系？

我知道我可以根据给定here

的示例将 Injector 传递给ngComponentOutlet

但我需要将动态ID或 ActivatedRoute 传递给组件。我无法解析 ActivatedRoute ，这是一个测试用例：

My.component.ts：

import {Component, OnInit} from '@angular/core'
import { MyService } from './my.service';
import  {Test} from './test'
import { Params,ActivatedRoute}   from '@angular/router';

@Component({
  moduleId: module.id.toString(),
  selector: 'my-selector',
  templateUrl: './my.component.html'
})

export class MyComponent implements OnInit{
   public test: Test;
    constructor(private myservice: MyService,private route: ActivatedRoute
    ) { }

    ngOnInit() {
        this.route.params
        .subscribe((params: Params) =>  {this.myservice.getTest(+params['id']).then(test => this.test = test)})
    }



}

您可以看到 MyComponent 需要 ActivatedRoute 并从此路线获取 ID 并加载相应的测试。当我导航到相应的网址但创建此组件时，这很正常动态地我不知道如何解决此 ActivatedRoute 以便它获取所需的数据。

P.S：我想将 ID 作为输入（）传递给 MyComponent 但是会出现同样的问题。如何将输入值传递给 ngComponentOutlet ？。

我希望有人在这里帮助我

已更新

以下是此方案的组件设置

test.ts

export class Test{
id: number;
name: string;
rank: number;
}

my.component.html

<div *ngIf="test"> 
ID: {{test.id}}
Name: {{test.name}}
Rank: {{test.rank}}
</div>

这是我的动态组件加载器组件，它记录了所有可动态加载的组件。

list.component.ts

import {Component, OnInit} from '@angular/core'
import  {MyComponent} from './my.component'
import { Params,ActivatedRoute}   from '@angular/router';

@export class ComponentWrapper{
  component: Component;
  id: number;
  other_data: Object;
  constructor(component: Component,id: number,other_data?: Object){
    this.component = component;
    this.id = id;
    this.other_data=other_data;
  }

}

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html'
})

export class ListComponent{
   public component_list: ComponentWrapper[];
   public some_ids = [1,2,3,4,5,6,7,8,9,10];
    constructor(private myservice: MyService,private route: ActivatedRoute
    ) { }


  addMyComponent(id: number,other_data?: Object)
    this.component_list.push(new ComponentWrapper(MyComponent,id,other_data));
  }

list.component.html

<div *ngFor="let c_id of some_ids"  (click)="addMyComponent(c_id)" >
Component ID: {{c_id}}
</div>


<div *ngFor="let wrapper of component_list">

<ng-container *ngComponentOutlet="wrapper.component"></ng-container>
</div>

如你所见。我想动态加载MyComponent。此组件获取ActivatedRoute中的ID并从服务加载Test并显示其名称，ID和等级。（当某些来自URL时，这将正常工作，因为路由器将使用相应的ID为ActivatedRoute提供它）

但是当有人点击任何list项时。我希望用ngComponentOutlet动态加载点击的组件（ID）。但目前MyComponent将无法获取所需的路由信息，并且无法使用点击的ID加载Test。

P.S这是一个简单的演示设置。在实际情况中，listComponent

中会有大量不同类型的组件

通过ngComponentOutlet指令在Angular2中为动态组件解析ActivatedRoute

0 个答案: