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

时间:2017-08-14 08:02:39

标签: javascript angular typescript

我有一个父组件 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 中将标题设置为开头的值,比如

  public title = 'Hola!';

它有效..)

您能否告诉我如何解决这个问题?

2 个答案:

答案 0 :(得分:3)

您的数据是异步提取的,因此在触发子组件title时,OnChanges尚未拥有值。使用@Input,我们可以关注ngOnChanges() { console.log('Show me title') console.log(this.title); } 中的更改,因此您可以执行以下操作:

title
只要输入title发生变化,

就会触发。如果您需要对if执行某些操作,最好先设置ngOnChanges语句,以便在尝试对其执行任何操作之前检查它是否有值,因为在title的第一次执行时,undefined将是return title

作为旁注,我不知道您在父母中使用subscribe尝试做什么,但这不会返回从Injectable内部获得的任何值。另外,为什么您的孩子组件标记为public class MainAdapter : BaseAdapter<string> { private List<string> items = new List<string>(); private Activity context; public MainAdapter(Activity context, List<string> items) : base() { this.context = context; this.items = items; } ... public void RemoveItemAt(int position) { items.RemoveAt(position); } } ?这与您的问题无关,但想指出这一点。

答案 1 :(得分:0)

导航到子视图时

 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')
 .
 .