如何从Angular2的父级中的dataService接收的数据传递给子级

Question

我有一个父组件app-parent和app-child 。 在app-parent中，我成为DataService中的数据

@Component({
  selector: 'app-parent',
  providers: [DataService]
})

export class Part1Component implements OnInit {
  public title: string;

  constructor(public dataService: DataService) {}

  ngOnInit() {
    this.dataService.get().subscribe(data => {
      this.itemsSource = this.dataService.convert(data, 1);
      this.title = this.itemsSource[0];
          });
   return this.title;
  }

模板

 <div id="content">Hallo!</div>
    <app-child [title]='title'></app-child>

我想将标题传递给子组件。 所以在我的孩子部分是：

@Injectable()
  export class InfoComponent implements OnInit, OnDestroy {
  @Input() title: any;

  ngOnInit() {
    console.log('Show me title')
    console.log(this.title);
}

因此，我尝试使用@Input（）传递我的数据，但是它不起作用（如果标题，我将变为未定义）。 我想这是因为首先在我的父组件中，我从DataService变成了数据（因为如果我将app-parent中的 title设置为开头的值，例如

  public title = 'Hola!';

有用.. ）

你能告诉我如何解决这个问题吗？

Answer 1

您的数据是异步获取的，因此在子组件OnInit被触发时， title尚未有值。 使用OnChanges我们可以监视@Input更改，因此您可以执行以下操作：

ngOnChanges() {
  console.log('Show me title')
  console.log(this.title);
}

只要输入title发生变化，就会触发。 如果您需要对title进行某些操作，则最好设置一个if语句，在尝试对其进行任何操作之前先检查其是否有价值，因为在第一次执行ngOnChanges ， title将是undefined 。

附带说明一下，我不知道您要如何使用父级中的return title进行操作，但这不会返回任何从内部subscribe获得的值。 另外，为什么您的子组件被标记为Injectable ？ 这与您的问题无关，但要指出这一点。

Answer 2

当您导航到子视图时

 import { NavController,........} from 'ionic-angular';
 .
 .
 this.dataService.get().subscribe(data => {
  this.itemsSource = this.dataService.convert(data, 1);
  this.title = this.itemsSource[0];
  this.navCtrl.push(ChildPage, { title: this.title })
 });
 .
 .

当您进入子视图时

 import { NavParams,............} from 'ionic-angular';
 .
 .
 this.title = navParams.get('title')
 .
 .