angular - 如何使用 Angular 2/4 以编程方式使用 'name/selector of the component' 添加带有组件的新选项卡？

Question

我正在使用 Material 标签:https://material.angular.io/components/tabs/overview

我有一个带有选项卡 View 的页面，我想通过单击按钮来为每个选项卡填充一个自定义组件。假设我有两个组件，选择器为“customcomponent1”和“customcomponent2”。我想让它这样当我点击一个按钮时，一个新的“对象”将被添加到列表中，如下所示:

{'component_name':'customcomponent1'}

一个新的标签“Tab2”将动态创建，如果它是这样的话:

  <mat-tab-group>
    <mat-tab label="Tab1">
<button (click)="createNewTabWithComponent('customcomponent1')"></button>
    </mat-tab>
    <mat-tab label="Tab2">
       <customcomponent1></customcomponent1>
    </mat-tab>
  </mat-tab-group>

如果我再次点击按钮...我会得到一个新标签:

<mat-tab-group>
    <mat-tab label="Tab1">
<button (click)="createNewTabWithComponent('customcomponent1')"></button>
    </mat-tab>
    <mat-tab label="Tab2">
       <customcomponent1></customcomponent1>
    </mat-tab>
    <mat-tab label="Tab3">
       <customcomponent2></customcomponent2>
    </mat-tab>
  </mat-tab-group>

我如何使用 angular2/4 完成此操作？我通常会使用 $compile 之类的东西，但我认为 angular2/4 没有。我想避免的是为每个组件创建一堆选项卡(假设我有 10 个组件，真的不想为每个组件创建多个 mat-tab 占位符并在每个组件上设置显示/隐藏标志)和 '硬编码其中的一个组件。

如果解决方案显示如何使用选择器的名称“动态”添加组件(用户在文本框中键入并点击按钮以“添加到列表”，这也是一个经过深思熟虑的答案。

我能想到的一个例子是，如果有一个文本框，有人可以输入任何字符串。如果字符串与组件的名称相匹配，则该组件会以编程方式“动态显示”在屏幕上，就好像它是原始模板的一部分一样。

我正在寻找的我知道不存在的伪代码(我认为，但如果它存在会很好):

<button (click)="addNameOfComponentToListOfCustomComponentStrings('text-from-a-textbox')">Add Component</button>

<div *ngFor="let string_name_of_component in listofcustomcomponentstrings">
    <{{string_name_of_component}}><</{{string_name_of_component}}>
</div>

将它们放入选项卡将是一个加号。如果这不可行，请发帖。否则，请发帖。

如果可能有一种解决方法可以使用一些“嵌套 Angular 路由”来完成，它根据 ngFor 中组件的名称拉出组件，那也可能有效......我对任何想法持开放态度。

Answer 1

对于您提出的问题(不想使用 10 个带 *ngIf 的占位符 mat-tab 来隐藏内容)，您可以通过路由和延迟加载做得更好。

简单导航:固定延迟加载路径。

例如，您的带有标签的页面位于 /tabs和它的模块是MyTabsModule .该模块的路由配置如下所示:

const routes = [{
  path: 'tabs',
  component: MyTabsComponent,
}];

假设您有两个选项卡，left和 right .您现在需要的是在惰性模块中添加子组件。像这样简单的东西:

const routes = [{
  path: 'tabs',
  component: MyTabsComponent,
  children: [
    {
      path: 'left',
      loadChildren: 'app/lazy/left.module#LazyLeftModule'
    },
    {
      path: 'right',
      loadChildren: 'app/lazy/right.module#LazyRightModule'
    }
  ]
}];

你的 MyTabsComponent需要以某种方式展示这一点，如何？这是Material文档说(简化):

<h2>My tabs component</h2>
<nav mat-tab-nav-bar>
  <a mat-tab-link routerLink="left">Left tab</a>
  <a mat-tab-link routerLink="right">Right tab</a>
</nav>

<router-outlet></router-outlet>

但是如果你有多个标签怎么办？嗯，文档说这个，我简化了前面的例子:

<a mat-tab-link
  *ngFor="let link of navLinks"
  routerLinkActive #rla="routerLinkActive"
  [routerLink]="link.path"
  [active]="rla.isActive">
    {{link.label}}
</a>

现在，您可以创建多个惰性组件，以及这些惰性路由的路由配置。事实上，您甚至可以创建一个脚本来生成¹ 您的路由配置，甚至可以在构建过程中为您生成那些惰性模块。

¹ - Angular Schematics ？

这是假设您知道自己拥有哪些组件。如果您只想让用户在您的文本框 中输入内容怎么办？并自己挑选任何组件？比如，有一个下拉菜单，让用户决定他们想要的所有选项卡，然后最重要的是，延迟加载它们？

文本框导航:参数化子组件和包装器组件。

怎么样？首先，您的路线 child 现在有点不同:

{
  path: 'tabs',
  component: MyTabsComponent,
  children: [{
    path: ':tab',
    loadChildren: 'app/lazy/lazy.module#LazyWrapperModule',
  }
}

现在，您的 LazyWrapperModule导出 LazyWrapperComponent .该组件在模板中有自己的本地路由器导出。它还会根据 url 加载一个组件:

constructor(private route: ActivatedRoute, private router: Router) {}
ngOnInit() {
  this.activatedRoute.params.subscribe(params => {
    const tab = params.tab;
    if (!this.isRouteValid(tab)) {
      return this.router.navigate(['error'])
    }
    this.router.navigate([tab]);
  });
}

并且 LazyWrapperModule 也有路由配置:

@NgModule({
  imports: [
    RouterModule.forChild([{
      path: 'tab1',
      component: Tab1
    },
    {
      path: 'tab2',
      component: Tab2
    },
    ...
    {
      path: 'tab100',
      component: Tab100
    }]
  ],
  ...

现在，这看起来好多了。您可以从 TabsModule 导航到任何内容。然后它通过参数加载一个组件。您的组件可以，例如如果用户输入了错误的选项卡，则显示错误选项卡，或者您可以简单地提供带有“允许”选项卡列表的预输入等等。有趣的东西!

但是如果您不想限制用户怎么办？你想让他们在那个文本框中输入“my-most-dynamic-component-ever”吗？

Dynamic all:动态创建组件

您可以简单地动态创建一个组件。再次有一个包装器组件，它创建并注入(inject)组件。例如。模板:

<input [(ngModel)]="name" required>
<textrea [(ngModel)]="template">
<button (click)="createTemplate()">Create template</button>

<div #target></div>

那么组件可以是这样的:

class MyTabsComponent {
  @ViewChild('target') target;
  name = 'TempComponent';
  template: '<span class="red">Change me!</span>';
  styles: ['.red { border: 1px solid red; }']

  constructor(private compiler: Compiler,
              private injector: Injector,
              private moduleRef: NgModuleRef<any>) {
  }

  createTemplate() {
    const TempComponent = Component({ this.template, this.styles})(class {});
    const TempModule = NgModule({
      declarations: [TempComponent]
    })(class {});

  this.compiler.compileModuleAndAllComponentsAsync(TempModule)
    .then((factories) => {
      const f = factories.componentFactories[0];
      const cmpRef = f.create(this.injector, [], null, this.m);
      cmpRef.instance.name = this.name;
      this.target.insert(cmpRef.hostView);
    });
  }
... // other stuff
}

现在，具体如何使用它，取决于您的具体需求。例如。作为家庭作业，您可以尝试像上面这样动态创建组件，并将其注入(inject)到 <mat-tab-group> 中更多以上。或者，动态创建一个到现有组件的路由作为延迟加载的链接。或者……可能性。我们爱他们。