Question

我试图从主要组件中调用home组件的atualizarTImeLine（）方法，我在互联网上进行搜索并找到了可能的解决方案

mainComponent.ts

export class MainComponent implements OnInit {

  email: string;
  @ViewChild(HomeComponent) home: HomeComponent;

  constructor(private bd:Bd, private router:Router, private autenticacao:Autenticacao) { }

  ngOnInit() {
    // firebase.auth().onAuthStateChanged((user)=>{
    //   if(user!=null){
    //   this.email=user.email
    //   this.atualizarTimeLine()
    //   }
    // })
  }

  atualizarTimeLine(){
    console.log("we are on timeline of main")
    this.home.atualizarTimeLine();
    this.router.navigate(['/main/home'])
  }
}

MainComponent.html

<nav class="navbar fixed-top navbar-light bg-white">
  <div class="container">
    <div class="logo">
      <a routerLink="/main/home">
        <img [src]="'/assets/logo-instagram-2.png'" />
      </a>
    </div>
    <div style="padding: 2px;">

      <button class="button btn-add-post" data-toggle="modal" data-target="#exampleModal"><i class="fab fa-instagram fa-2x"></i></button>

      <button [routerLink]="['./profile']" class="button btn-profile"><i class="far fa-user fa-2x"></i></button>

      <button class="button btn-signout" (click)="sair()"><i class="fas fa-sign-out-alt fa-2x"></i></button>


  </div>
  </div>  
</nav>

<app-incluir-publicacao (atualizarTimeLine)="atualizarTimeLine()"></app-incluir-publicacao>


<router-outlet></router-outlet>

HomeComponent.ts

export class HomeComponent implements OnInit {
  @ViewChild('publicacoes') public publicacoes:any
  constructor() { }

  ngOnInit() {

  }



  public atualizarTimeLine(){
    console.log("we are on timeline of home")
    this.publicacoes.atualizarTimeLine()
  }
}

app.routes

export const ROUTES:Routes=[
    {path:'', component:AcessoComponent},
    { path: "main", component: MainComponent, canActivate:[AutenticacaoGuard], children: [
        { path: "home",component:HomeComponent},
        { path: "profile",component:ProfileComponent}]
    }


]

错误TypeError：无法读取未定义的属性'atualizarTimeLine' 在MainComponent.push ../ src / app / main / main.component.ts.MainComponent.atualizarTimeLine（main.component.ts：36）在Object.eval [作为handleEvent]（MainComponent.html：21）在handleEvent（core.js：23106）在callWithDebugContext（core.js：24176）在Object.debugHandleEvent [作为handleEvent]（core.js：23903）在dispatchEvent（core.js：20555）在core.js：22045 在SafeSubscriber.schedulerFn [作为_next]（core.js：13526）在SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.SafeSubscriber .__ tryOrUnsub（Subscriber.js：196）在SafeSubscriber.push ../ node_modules / rxjs / _esm5 / internal / Subscriber.js.SafeSubscriber.next（Subscriber.js：134）

使用ViewChild（）从父组件调用子组件的方法

0 个答案: