我的页面中有一个子导航,在公共主视图下方显示一些子视图.我想通过一个对象传递给子视图,这样我就可以在主组件中检索一次数据,然后与子组件共享它.

注意:如果我在main.html中包含该指令,它可以工作,但这不是我想要的行为.

主要观点:

Details
   
One | 
Two | 
Three   
  

子视图1:

{{ data.name }}
...

主要观点:

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

Dennis Smole.. 14

如果它是简单的数据,您可以通过RouteParams传递它们

Three

然后在你的子视图中

@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 = ['a','b','c','d'];
  list2: array;

  constructor() {
    this.list2 = [1,2,3,9,11];
  }
}

如何注入服务:

export class Cars {
  constructor(cars:CarsService) {
    this.cmpList1 = cars.list1;
    this.cmpList2 = cars.list2;
  }
}

这样,无论父/子或其他奇怪的限制,您都可以使用该服务进行通信.

1> Dennis Smole..：

---

如果它是简单的数据,您可以通过RouteParams传递它们

Three

然后在你的子视图中

@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 = ['a','b','c','d'];
  list2: array;

  constructor() {
    this.list2 = [1,2,3,9,11];
  }
}

如何注入服务:

export class Cars {
  constructor(cars:CarsService) {
    this.cmpList1 = cars.list1;
    this.cmpList2 = cars.list2;
  }
}

这样,无论父/子或其他奇怪的限制,您都可以使用该服务进行通信.

---

不幸的是,我需要传递的不仅仅是简单的数据(一个对象).我试图避免创建一个单独负责在两个组件之间传递数据的服务,但似乎我可能没有选择.

---

随着新的v3路由器不幸过时.

2> Tanmay..：

---

看起来语法已经改变.以下为我工作~Angular4.0.0

HTML(传递路由参数)

New Job

零件

constructor(private route: ActivatedRoute) { }

ngOnInit() {       
  this.getTemplate();

  this.sub = this.route.params.subscribe(params => { this.id = params['mode'];
  console.log("Routing Mode", this.id);    
  });
}