Javascript 使用ngComponentOutlet的角材质选项卡

我正在使用浏览文档的不同部分。我在TabItem类中定义了每个选项卡，如下所示：

class TabItem {
     constructor(
         public component: Type<any>, 
         public data: TabData,
         public active: boolean
     ) {}
}

class选项卡项{
建造师(
公共组件：键入
您可以创建一个指令，将所需的数据导入组件：

数据提供程序.directive.ts

import { Directive, Input } from "@angular/core";

@Directive({
  selector: '[dataProvider]'
})
export class DataProviderDirective {
  @Input('dataProvider') data: any;
}

import { Component, OnInit } from '@angular/core';
import { DataProviderDirective } from './data-provider.directive';

@Component({
  selector: 'app-tab-one',
  template: `
    <p>I am tab one!</p>
    <p>How can I access my respective TabItem?</p>
    <pre>{{ dataProvider.data | json }}</pre> 
  `,
})
export class TabOneComponent implements OnInit {

  constructor(public dataProvider: DataProviderDirective) { }

  ngOnInit() {
    console.log(this.dataProvider.data)
  }
}

tabs.html

<ng-container *ngFor="let tab of tabs">
  <mat-tab [dataProvider]="tab">



现在，动态生成的组件可以从该指令读取数据：

选项卡1.component.ts

import { Directive, Input } from "@angular/core";

@Directive({
  selector: '[dataProvider]'
})
export class DataProviderDirective {
  @Input('dataProvider') data: any;
}

import { Component, OnInit } from '@angular/core';
import { DataProviderDirective } from './data-provider.directive';

@Component({
  selector: 'app-tab-one',
  template: `
    <p>I am tab one!</p>
    <p>How can I access my respective TabItem?</p>
    <pre>{{ dataProvider.data | json }}</pre> 
  `,
})
export class TabOneComponent implements OnInit {

  constructor(public dataProvider: DataProviderDirective) { }

  ngOnInit() {
    console.log(this.dataProvider.data)
  }
}

从'@angular/core'导入{Component，OnInit}；
从“./data provider.directive”导入{DataProviderDirective}；
@组成部分({
选择器：“应用程序选项卡一”，
模板：`
我是第一个

如何访问各自的选项卡项

{{dataProvider.data | json}}
`,
})
导出类TabOneComponent实现OnInit{
构造函数（公共数据提供程序：DataProviderDirective）{}
恩戈尼尼特（）{
console.log（this.dataProvider.data）
}
}

基本上，您正在寻找一种通过
*ngComponentOutlet
传递参数的方法，对吗？。它基本上说这是不受支持的，您应该使用动态组件，这不是您想要的，所以我不知道我是否在帮助您。@yurzui您是如何知道将指令放在
mat tab
选择器上的原因我认为指令应该在包含
*ngComponentOutlet
指令的
ng容器上，因为该组件被实例化到这个
ng容器中
，非常有兴趣了解它是如何工作的。
ngComponentOutlet
指令默认情况下查看parentInjector