使用@Input和路由器出口在组件之间传递数据？

// 子组件
import { Component, Input } from '@angular/core';

@Component({
  selector: 'child-component',
  template: '<p>{{ inputText }}</p>'
})
export class ChildComponent {
  @Input() inputText: string;
}

// 父组件
import { Component } from '@angular/core';

@Component({
  selector: 'parent-component',
  template: '<child-component [inputText]="textFromParent"></child-component>'
})
export class ParentComponent {
  textFromParent = 'Hello from parent component!';
}

// 在模块中定义路由
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';
import { DetailComponent } from './detail.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'detail/:id', component: DetailComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// 在组件中获取参数
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-detail',
  template: '<p>Detail component, id: {{ id }}</p>'
})
export class DetailComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id');
  }
}