没有找到为什么angular2组件在重新访问选项卡时无法绑定基础模态

Question

我有一个父组件调用另一个组件，该组件在同一页面上呈现模态。在第一次加载时，父组件能够将数据传递给子组件。但是一旦我转到另一个页面并返回，那么来自父级的数据不会被绑定到子组件模态。

在plunker中遵循的步骤： -

1. 在第一个输入框（abcd）中输入任何值
2. 在第二个文本框中输入modal1
3. 点击modal1按钮
4. 模态中的正确值将是apeear
5. 将第一个文本框中的值更改为abcdef
6. 将第二个文本框值更改为modal2
7. 点击modal2按钮
8. 正确的价值会来
9. 现在将第一个文本框中的值重新更改为abcedfghij
10. 在第一个文本框中将值更改为modal1
11. 点击modal1
12. 值未获得更新。它应该更新，因为绑定在同一个字段上并传递给两个组件。

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');
      }

    }
    }