我有一个父组件调用另一个组件,该组件在同一页面上呈现模式 . 在第一次加载时,父组件能够将数据传递给子组件 . 但是一旦我转到另一个页面并返回,那么来自父级的数据不会被绑定到子组件模态 .
在plunker中遵循的步骤: -
-
在第一个输入框中输入任何值(abcd)
-
在第二个文本框中输入modal1
-
点击modal1按钮
-
模态中的正确值将为apeear
-
将第一个文本框中的值更改为abcdef
-
将第二个文本框值更改为modal2
-
点击modal2按钮
-
正确值将来临
-
现在将第一个文本框中的值重新更改为abcedfghij
-
在第一个文本框中将值更改为modal1
-
点击modal1
-
值未更新 . 它应该更新,因为绑定在同一个字段上并传递给两个组件 .
Plunker: - https://plnkr.co/edit/GNPyL6DzzxCzUD8VZMRF?p=preview
{
import {Component,AfterViewInit} from '@angular/core'
@Component({
selector: 'revel2',
inputs: ['value']
template: `
<div id="myModal2" class="small reveal" data-reveal aria-hidden="true" role="dialog">
I am Modal2 and I got value from parent component as:-
{{value}}
</div>`
})
export class ModalComponent2 {
value:string;
ngAfterViewInit(): void {
$('#myModal2').foundation();
$(window).trigger('open.fndtn.reveal');
}
}
}