我的页面中有一个子导航，显示常见主视图下方的一些子视图。我想通过<router-outlet>将对象传递给子视图，以便我可以在主要组件中检索一次数据，然后与子组件共享它。
注意：如果我在 main.html 中包含指令<one></one>，它可以正常运行，但这不是我想要的行为。
主要观点：
<h1>Details</h1>
<a [router-link]="['./sub1']">One</a> |
<a [router-link]="['./sub2']">Two</a> |
<a [router-link]="['./sub3']">Three</a>
<hr/>
<router-outlet [data]="maindata"></router-outlet>
子视图1：
<h2>{{ data.name }}</h2>
...
主要观点：
@Component({
selector: 'main-detail',
directives: [ROUTER_DIRECTIVES],
templateUrl: './main.html'
})
@RouteConfig([
{ path: '/', redirectTo: '/one' },
{ path: '/one', as: 'One', component: OneComponent },
{ path: '/two', as: 'Two', component: TwoComponent },
{ path: '/three', as: 'Three', component: ThreeComponent }
])
export class MainComponent {
maindata: Object = {name:'jim'};
}
子视图1：
@Component({
selector: 'one',
directives: [CORE_DIRECTIVES],
inputs: ['data'],
templateUrl: './one.html'
})
export class OneComponent {
@Input() data;
}
答案 0 :(得分：12)
如果是简单数据，您可以通过RouteParams
传递它们<a [router-link]="['./sub3'],{name:'jim'}">Three</a>
然后在子视图中
@Component({
selector: 'one',
directives: [CORE_DIRECTIVES],
templateUrl: './one.html'
})
export class OneComponent {
data: any;
constructor(params: RouteParams){
this.data = params.get('data');
}
}
您还可以设置路由以始终通过移动组件中的RouterConfig来从组件传递参数（注意，这不是通常的方式）：
export class AppCmp {
history: string[] = [];
constructor(public list: PersonalizationList,
private router_: Router) {
list.get('histoy', (response) => {
this.history = response;
});
router_.config([
{ path: '/', component: HomeCmp, as: 'Home', data: this.history },
{ path: '/about', component: AboutCmp, as: 'About' }
]);
}
}
如果您打算做一些更复杂的事情，我建议使用服务在路由/组件之间进行通信。这实际上是我喜欢的方式。
样品服务：
import {Injectable} from 'angular2/angular2';
@Injectable()
export class CarsService {
list1: array<any> = ['a','b','c','d'];
list2: array<any>;
constructor() {
this.list2 = [1,2,3,9,11];
}
}
如何注册服务：
export class Cars {
constructor(cars:CarsService) {
this.cmpList1 = cars.list1;
this.cmpList2 = cars.list2;
}
}
这样，您可以使用该服务进行通信，而不管父母/子女或其他奇怪的限制。
答案 1 :(得分：12)
看起来语法已经改变。以下对我有用~Angular4.0.0
HTML（传递路线参数）
<li><a [routerLink]="['/templatecreate',{mode:'New'}]">New Job</a></li>
<强>组件
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.getTemplate();
this.sub = this.route.params.subscribe(params => { this.id = params['mode'];
console.log("Routing Mode", this.id);
});
}
答案 2 :(得分：1)
我们有一个大的angular项目（只是从Angular开始，所以解决方案和我们的理解一样好:-)）。
shell组件可以调用4个（基于路由）“动作”模块中的任何一个-其中每个模块都有自己的服务（但没有组件视图），并且可以调用6个（基于路由）共享组件中的任何一个。共享的组件在所有4个服务之间共享，因此它们不能具有任何特定于调用模块的逻辑。
我们正在使用服务解析器ActionModuleServiceResolver，该服务解析所有4个动作服务。根据状态（RouterStateSnapshot）URL，我们返回适当的服务。
@Injectable()
export class ActionModuleServiceResolver implements Resolve<ActionModuleService> {
constructor(private _mod1: ModOneService,
private _mod2: ModTwoService, private _mod3: ModThreeService,private _mod4: ModFourService) { }
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): ActionModuleService {
if(state.url.includes(`/${ActionModuleType.ModOne}/`))
return this._mod1;
else if(state.url.includes(`/${ActionModuleType.ModTwo}/`))
return this._mod2;
....
else
return null;
}
}
每个操作模块的“路由”模块都将路由到共享组件，如下所示：
const routes: Routes = [
{
path: 'sharedMod1', component: SharedModOneComponent, data: {
title: `ModOne_SharedModOne`,
routeName: 'sharedMod1'
}, resolve: { actionModule: ActionModuleServiceResolver }
},
接下来，每个SharedModule通过DI获取激活的路由并获取调用服务：
//SharedModOne.component.ts
constructor(protected route: ActivatedRoute) {}
ngOnInit() {
this.actionModSvc= this.route.snapshot.data['actionModule'];
this.actionModSvc.getDesignFile(this.route);
}
希望这对某人有帮助，如果这个问题可以改善，请告诉我。
谢谢
RDV
答案 3 :(得分：0)
我认为正确的Angular2传递数据的方式是通过依赖注入（通过使用服务），否则用户将能够在浏览器的URL中看到您传递的数据。
此外，使用服务将允许“分离关注点”，这意味着组件A不应该依赖于组件B.
依赖注入链接：
1）https://angular.io/guide/dependency-injection