ダイナミックタブナビゲーションシステムIは、角2</p> <p>を使用して動的タブナビゲーションシステムを作成したい角度2

Question

を使用して基本的に私は、最初のリンクのようにクリック可能なオブジェクト（、ボタンを含む、単一のコンポーネントを含む単一のタブを表示させたいです...）。

これらのリンクをクリックすると新しいタブが追加され、各タブ（最初のタブと新しく作成されたタブ）をクリックすると、対応するコンポーネントが表示ゾーン（ルータ出口）に表示されます。 。

これは私がこれまで試したものです：

app.component.ts（ルートコンポーネントと「タブコンテナ）：

import { Component, OnInit } from '@angular/core'; 
 
import { TabComponent } from './tab/tab.component'; 
 
import { FirstComponent } from './test/first.component'; 
 
import { SecondComponent } from './test/second.component'; 
 
import { ThirdComponent } from './test/third.component'; 
 
import { ROUTER_DIRECTIVES } from '@angular/router'; 
 

 
@Component({ 
 
    selector: 'my-app', 
 
    templateUrl: './app/app.component.html', 
 
    directives: [TabComponent, ROUTER_DIRECTIVES, FirstComponent, SecondComponent, ThirdComponent], 
 
}) 
 

 
export class AppComponent implements OnInit{ 
 

 
\t tabList: any[]; 
 

 
\t constructor() {} 
 

 
\t ngOnInit() { 
 
\t \t this.tabList = [ 
 
\t \t \t { 
 
\t \t \t \t name: 'link 1', 
 
\t \t \t \t link: "/comp1" 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t name: 'link 2', 
 
\t \t \t \t link: "/comp2" 
 
\t \t \t }, 
 
\t \t \t { 
 
\t \t \t \t name: 'link 3', 
 
\t \t \t \t link: "/comp3" 
 
\t \t \t } 
 
\t \t ] \t \t 
 
\t } 
 
}

app.component.htmlを：

<h1>Tabs container</h1> 
 
<div> 
 
\t <nav> 
 
\t \t <tab *ngFor="let tab of tabList" [name]="tab.name" [link]="tab.link"></tab> 
 
\t </nav>  
 
</div> 
 
<div> 
 
    <router-outlet></router-outlet> 
 
</div>

各タブはtab.component.tsで表されます。

import { ROUTER_DIRECTIVES, Router } from '@angular/router'; 
 
import { Component, OnInit, Input } from '@angular/core'; 
 

 
@Component({ 
 
\t selector: 'tab', 
 
\t templateUrl: './app/tab/tab.component.html', 
 
    \t directives: [ROUTER_DIRECTIVES] 
 
}) 
 

 
export class TabComponent implements OnInit { 
 
\t @Input() name: string; 
 
\t @Input() link: string; 
 
\t @Input() param: string; 
 
\t targetArray: Array<any>; 
 

 
\t constructor(private router: Router) {} 
 

 
\t ngOnInit() { 
 
\t \t 
 
\t } 
 

 
\t 
 
} \t

tab.component.htmlあるテンプレート：

<a [routerLink]='link'>{{name}}</a>

ここ

はapp.routes.tsファイルである：ここ

import { provideRouter, RouterConfig } from '@angular/router'; 
 
import { TabComponent } from './tab/tab.component'; 
 
import { FirstComponent } from './test/first.component'; 
 
import { SecondComponent } from './test/second.component'; 
 
import { ThirdComponent } from './test/third.component'; 
 

 
export const routes: RouterConfig = [ 
 
    { 
 
    path: '', 
 
    component: TabComponent 
 
    }, 
 
    { 
 
    path: 'comp1', 
 
    component: FirstComponent 
 
    }, 
 
    { 
 
    path: 'comp2', 
 
    component: SecondComponent 
 
    }, 
 
    { 
 
    path: 'comp3', 
 
    component: ThirdComponent 
 
    }, 
 
]; 
 

 
export const APP_ROUTER_PROVIDERS = [ 
 
    provideRouter(routes) 
 
];

（SecondComponentとThirdComponentが類似している）は、例えばfirst.component.tsある：

import { Component, OnInit } from '@angular/core'; 
 

 
@Component({ 
 
\t selector: 'first', 
 
\t template: `<h1>First</h1> 
 
    \t \t \t <button (click)="addTab()">Display child</button> 
 
\t   ` 
 
}) 
 
export class FirstComponent implements OnInit { 
 
\t constructor() {} 
 

 
\t ngOnInit() { 
 
\t \t 
 
\t } 
 

 
\t addTab(){ 
 
\t } 
 
} 
 
\t

私はタb作成ロジックを基本的にapp.component.ts内のtabList配列に追加して目的の動作を取得するが、このコンポーネントからapp.component.tsにデータを転送する方法はわかりません。

私はまた、どのようなアプローチや示唆もありません。

Answer 1

あなたのコンポーネントにルータを注入し、ダイナミックリンクを設定するには、設定メソッドを使用することができます。

router.config([ 
    { 'path': '/', 'component': IndexComp }, 
    { 'path': '/user/:id', 'component': UserComp }, 
]); 

ルータサービスのマニュアルは、hereを見つけることができます。