Question

我想使用Angular 2创建动态标签导航系统。

基本上我想首先显示一个包含单个组件的选项卡，其中包含可点击的对象（如链接，按钮......）。

我希望点击其中一个链接添加一个新标签，然后点击每个标签（初始标签和新创建的标签）会在下方的显示区域（路由器插座）中显示相应的组件。

这是我到目前为止所尝试的：

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{ 

	tabList: any[];

	constructor() {}

	ngOnInit() {
		this.tabList = [
			{
				name: 'link 1',
				link: "/comp1"
			},
			{
				name: 'link 2',
				link: "/comp2"
			},
			{
				name: 'link 3',
				link: "/comp3"
			}
		]		
	}
}

app.component.html：

<h1>Tabs container</h1>
<div>
	<nav>
		<tab *ngFor="let tab of tabList" [name]="tab.name" [link]="tab.link"></tab>
	</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({
	selector: 'tab',
	templateUrl: './app/tab/tab.component.html',
  	directives: [ROUTER_DIRECTIVES]
})

export class TabComponent implements OnInit {
	@Input() name: string;
	@Input() link: string;
	@Input() param: string;
	targetArray: Array<any>;

	constructor(private router: Router) {}

	ngOnInit() {
		
	}

	
}

哪个模板是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)
];

例如，first.component.ts（SecondComponent和ThirdComponent类似）：

import { Component, OnInit } from '@angular/core';

@Component({
	selector: 'first',
	template: `<h1>First</h1>
 			   <button (click)="addTab()">Display child</button>
	           `
})
export class FirstComponent implements OnInit {
	constructor() {}

	ngOnInit() {
		
	}

	addTab(){
	}
}

我想将标签创建逻辑放在addTab（）方法中，基本上将一个元素添加到app.component.ts中的tabList数组并获取所需的行为，但我不知道如何从这个传输数据组件到app.component.ts。

我也对任何不同的方法和建议持开放态度。

Answer 1

您可以将路由器注入您的组件，然后使用 config 方法配置动态链接。

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

可以找到路由器服务的文档here。

使用Angular 2的动态标签导航系统

1 个答案: