Angular 调用的同级组件方法未更新其他组件2中的视图

数据绑定在Angular 2中不起作用。 调用方法时未更新名称。 调用updateNameSibl（）时无法更新secApp组件中的视图 方法，该方法来自app.ts updateName（）方法

添加更多详细信息-- 我有一个类似于两个组件的两个视图的情况，从一个组件我想更新第二个组件的视图。更新按钮在第一个组件中可用。我不能使用父子关系，因为第二个独立于第一个组件。希望两个组件始终可用

请找到我的宝物--

提前谢谢

app.ts

@Component({
  selector: 'my-app',
  template: `
    <div (click)=updateName()>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  secAppObj:secApp;

  constructor() {
    this.name = `Angular! v${VERSION.full}`;
    this.secAppObj = new secApp();
  }

  public updateName(){
    console.log("inside updateName")
    this.secAppObj.updateNameSibl();
  } 
}


secApp.ts

@Component({
  selector: 'sec-app',
  template: `
    <div>
      <h2>I am second {{name}}</h2>
    </div>
  `,
})
export class secApp {
  name:string;
  constructor() {
    this.name = `sandeep`
  }
  public updateNameSibl(){
    console.log("inside updateNameSibl")
    this.name = `sandeep2`
  }
}

@组件({
选择器：“我的应用程序”，
模板：`
你好{{name}
`,
})
导出类应用程序{
名称：字符串；
secappbj:secApp；
构造函数（）{
this.name=`Angular！v${VERSION.full}`；
this.secAppObj=新的secApp（）；
}
公共updateName（）{
log（“内部更新名”）
this.secAppObj.updateNameSibl（）；
} 
}
secApp.ts
@组成部分({
选择器：“sec应用程序”，
模板：`
我是第二个{{name}
`,
})
导出类secApp{
名称：字符串；
构造函数（）{
this.name=`sandeep`
}
公共updateNameSibl（）{
log（“内部updateNameSibl”）
this.name=`sandep2`
}
}

解决方案：-

更新的Plunker链接：-

app.ts

//我们的根应用程序组件
从“@angular/core”导入{Component，NgModule，VERSION，ViewChild}
从“@angular/platform browser”导入{BrowserModule}
从“/secApp”导入{secApp}
@组成部分({
选择器：“我的应用程序”，
模板：`
你好{{name}
`,
})
导出类应用程序{
名称：字符串；
secappbj:secApp；
@ViewChild（secApp）子级：secApp；
构造函数（）{
this.name=`Angular！v${VERSION.full}`；
this.secAppObj=新的secApp（）；
}
公共updateName（）{
log（“内部更新名”）
this.name=this.child.updateNameSibl（）；
} 
}
@NGD模块({
导入：[BrowserModule]，
声明：[App，secApp]，
引导：[App，secApp]
})
导出类AppModule{}

secApp.ts

从'@angular/core'导入{Component，NgModule，VERSION}
从“@angular/platform browser”导入{BrowserModule}
@组成部分({
选择器：“sec应用程序”，
模板：`
我是第二个{{name}
`,
})
导出类secApp{
名称：字符串；
构造函数（）{
this.name=`sandeep`
}
公共updateNameSibl（）{
警报（“hi”）；
log（“内部updateNameSibl”）
返回'sandep2'；
}
}

为什么

secApp

不是

App

的孩子？您想做什么？@San，请在问题中添加更多细节，以及您想要实现的目标。问题不太清楚，因此，在当前场景中，这可能对用户有用，直到和除非用户要求更正。此更改不更新secApp。这两个组件视图应始终可用，secApp组件名称应在app组件发生更改时更新。是否希望app.ts中的“名称”在调用app.ts中的方法updatename（）时在secApp.ts中更新？我不一定希望secApp中的名称在调用方法updatename（）时更新--到目前为止，我正在硬编码，甚至这个值都没有得到更新

//our root app component
import {Component, NgModule, VERSION, ViewChild} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {secApp} from './secApp'

@Component({
  selector: 'my-app',
  template: `
    <div (click)=updateName()>
      <h2>Hello {{name}}</h2>
    </div>
    <sec-app ></sec-app>
  `,
})
export class App {
  name:string;
  secAppObj:secApp;

  @ViewChild(secApp) child:secApp;
  constructor() {
    this.name = `Angular! v${VERSION.full}`;
    this.secAppObj = new secApp();
  }

  public updateName(){

    console.log("inside updateName")
   this.name  =  this.child.updateNameSibl();
  } 
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, secApp ],
  bootstrap: [ App, secApp ]
})
export class AppModule {}

import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'sec-app',
  template: `
    <div>
      <h2>I am second {{name}}</h2>
    </div>
  `,
})
export class secApp {
  name:string;
  constructor() {
    this.name = `sandeep`
  }
  public updateNameSibl(){
    alert('hi');
    console.log("inside updateNameSibl")
    return `sandeep2`;
  }
}