Как добавить новые вкладки с компонентами, используя "имя/селектор компонента" программно, используя angular 2/4?

для вашей заявленной проблемы (не желая иметь 10 заполнителей-вкладок с *ngIf, чтобы скрыть материал), вы могли бы сделать гораздо лучше с маршрутизацией и ленивой загрузкой.

простая навигация: исправлены пути с ленивой загрузкой.

скажем, ваша страница с вкладками находится в /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 нужно как-то это показать, как? Вот что!--26-->материал документы говорят (упрощенно):

<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>

теперь вы можете создать несколько ленивых компонентов и конфигурацию маршрута для этих ленивых маршрутов. На самом деле, вы могли бы даже создать сценарий, который генерирует¹ ваша конфигурация маршрута и даже эти ленивые модули для вас как часть сборки.

¹ - Угловые Схемы?

это при условии, что вы знаете, какие компоненты у вас есть. Что делать, если вы просто хотите, чтобы пользователь ввел в это поле твой? И выбрать любой компонент самостоятельно? Например, есть раскрывающийся список, и пусть пользователь решает все вкладки, которые они хотят, а затем, поверх этого, загрузите их лениво?

поле навигации: дети параметризация и компонент оболочки.

как это? Во-первых, ваши дети маршрута теперь немного другие:

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

сейчас, ваш LazyWrapperModule экспорт a 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 перейти к чему угодно. Затем он загружает компонент по параметру. Ваш компонент может, например, показать вкладку ошибки, если пользователь вводит неправильную вкладку,или вы можете просто предоставить typeahead со списком" разрешенных " вкладок и т. д. Забавная штука!

но что, если вы не хотите ограничивать пользователя? Вы хотите, чтобы они набрали "мой самый динамичный компонент" в этом текстовом поле?

Dynamic all: динамическое создание компонентов

вы можете просто создайте компонент динамически. Снова есть компонент-оболочка, который создает и вводит компонент. Е. Г. шаблон:

<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
}

теперь, как конкретно использовать его, зависит от вашей конкретной потребности. Е. Г. для выполнения домашних заданий, вы можете попробовать динамически создать компонент, как это выше, и впрыскивать его в <mat-tab-group> еще выше. Или динамически создайте маршрут к существующему компоненту в виде лениво загруженной ссылки. Или... размеренности. Мы их любим.