如何更改子組件的父變量？

我在父模板中有一個<header>，我需要它通過路由模塊顯示子模板時消失。我期望的是向頭標籤添加一個類，以便我可以通過CSS隱藏它。這是我有：

app.component.ts

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'app', 
    template: ` 
    <header [class.hidden]="hide"> 
     <h1>My App</h1> 
     <ul> 
      <li><a href="/home"></a></li> 
      <li><a href="/showoff"></a></li> 
     </ul> 
    </header> 
    <router-outlet></router-outlet> 
    ` 
}) 

export class AppComponent { 
    hide = false; // <-- This is what I need to change in child component 
}

APP-routing.module.ts

import { RouterModule, Routes } from '@angular/router'; 

import { HomeComponent } from './welcome.component'; 
import { ShowOffComponent } from './show.off.component'; 

const routes: Routes = [ 
    { path: '', component: HomeComponent }, 
    { path: 'showoff', component: ShowOffComponent }, 
]; 

export const AppRouting = RouterModule.forRoot(routes, { 
    useHash: true 
});

show.offf.component.ts

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'app-showoff', 
    template: ` 
     <h2>Show Off</h2> 
     <div>Some contents...</div> 
    ` 
}) 

export class ShowOffComponent { 
    hide = true; // <-- Here is the problem. 
       // I don't have any idea how to reach parent variables. 
}

來源

2017-01-16 Mdkusuma

Yo ü可以使用output emitter

在你的子組件，

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'app-showoff', 
    template: ` 
     <h2>Show Off</h2> 
     <div>Some contents...</div> 
    ` 
}) 

export class ShowOffComponent { 
    @Output() onHide = new EventEmitter<boolean>(); 
    setHide(){ 
     this.onHide.emit(true); 
    } 
}

在父，

export class AppComponent { 
    hide = false; 
onHide(val: boolean) { 
    this.hide=val; 
    } 
}

來源

2017-01-16 05:14:45

對於更復雜的場景，您可以執行一系列操作（'LayoutService'）並在那裏創建一個EventEmitter，所以無論你想要什麼，你都可以使用這個事件來處理任何組件。 –

對..根據具體情況，根據文檔有很多父母子女溝通的方式。 –

謝謝，但父組件上的'onHide（）'參數在這種情況下不起作用。我已經在'setHide（）'和'onHide（）'上使用簡單的提示測試了它。當'（click）'處理程序觸發時，只有'setHide（）'顯示警報。然後我意識到這不能使用路由模塊後，我發現[this]（http://stackoverflow.com/questions/35878762/how-do-you-attach-an-eventemitter-output-toa-a-組件的下路由）。 – Mdkusuma

在你app.component.ts您可以檢查您的網址，並設置如下hide變量值：

import { Component } from '@angular/core'; 
import { Router, NavigationStart } from '@angular/router'; 

@Component({ 
    selector: 'app', 
    template: ` 
    <header [class.hidden]="hide"> 
     <h1>My App</h1> 
     <ul> 
      <li><a href="/home"></a></li> 
      <li><a href="/showoff"></a></li> 
     </ul> 
    </header> 
    <router-outlet></router-outlet> 
    ` 
}) 

export class AppComponent { 
    hide = false; // <-- This is what I need to change in child component 

    constructor(private router: Router){} 

    public ngOnInit() { 
    this.router.events.subscribe((events) => { 
     if (events instanceof NavigationStart) { 
     if (events.url === '/' || events.url === '/home') { 
      this.hide = false; 
     } else { 
      this.hide = true; 
     } 
     } 
    }); 
    } 

}

來源

2017-01-16 05:16:56 ranakrunal9

謝謝你的男人！ –

如何更改子組件的父變量？

回答

相關問題