我有一个父组件 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!';
它有效..)
您能否告诉我如何解决这个问题?
答案 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')
.
.