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

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

    }
    }