Einstellung übergeordnete Komponenten Variable aus geordnete Komponente Variable

Question

Problem: Um Eigentum der Elternkomponente gesetzt, wenn untergeordnete Komponente vorhanden ist und Trigger-UI Update

Die meisten Beispiele, die die Verwendung von @output Arbeit mit verschachtelten Komponenten machen. Mein Szenario ist, wenn eine verschachtelte Komponente über Router-Outlet aufgerufen wird.

Ich versuche, die Eigenschaft iconStatus auf false zu setzen, wenn route "/ calendar" ist, ansonsten aber true.

Update: Die Anweisung this.showIcon.emit({value: false}); ausgelöst wird, aber die Variable ShowIcon in Kalender (Kind) Komponente ist nicht richtig an Inhalt (übergeordneten) Komponente

Content.component.ts

/// <reference path="../../typings/jquery/jquery.d.ts" /> 
import { Component, AfterViewChecked } from '@angular/core'; 
import { ROUTER_DIRECTIVES,ActivatedRoute } from '@angular/router'; 
import { MaterializeDirective} from "angular2-materialize"; 
import { calendarComponent} from '../content/calendar/calendar.component'; 

import { User } from '../user.interface'; 

declare var $:JQueryStatic; 

@Component({ 
    selector: 'content', 
    templateUrl: 'app/content/content.html', 
    styleUrls: ['src/css/content.css'], 
    inputs: ['signedInUser'], 
    directives: [MaterializeDirective, ROUTER_DIRECTIVES, calendarComponent] 
}) 

export class contentComponent { 
    public signedInUser: User; 
    public iconStatus: boolean = true; 

    constructor(private route: ActivatedRoute) { 

    } 
    ngAfterViewInit() {} 
    ngAfterContentChecked() {} 

    changeIconState($event) { 
     console.log($event); 
    } 
} 

emittiert wird

component.html

<div class="container" (showIcon)="changeIconState($event);"> 
    <div class="row center-align" id="tabs"> 
     <div class="row"> 
      <div class="col s3 "> 
       <a [routerLink]="['/calendar']"> 
        <div class="card-panel orange lighten-4 hoverable"> 
         <div class="row" *ngIf="iconStatus"> 
          <div class="col s12"> 
           <i class="fa fa-calendar fa-3x" aria-hidden="true"></i> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col s12"> 
           Calendar 
          </div> 
         </div> 
        </div> 
       </a> 
      </div> 
      <div class="col s3"> 
       <a [routerLink]="['/certifications']"> 
        ... 
       </a> 
      </div> 
      <div class="col s3"> 
       <a [routerLink]="['/events']"> 
        ... 
       </a> 
      </div> 
      <div class="col s3"> 
       <a [routerLink]="['/leaves']"> 
        ... 
       </a> 
      </div> 
     </div> 
    </div> 
    <div> 
     <router-outlet></router-outlet> 
    </div> 
</div> 

calendar.c omponent.ts

/// <reference path="../../../typings/jquery/jquery.d.ts" /> 
import { Component, OnInit, AfterViewChecked, ViewEncapsulation, Input, EventEmitter } from '@angular/core'; 
import { ROUTER_DIRECTIVES,ActivatedRoute } from '@angular/router'; 
import { Attendance } from './Attendance.interface'; 
import { AttendanceService } from './attendance.service'; 
import { HttpService } from '../../http.service'; 
import { Subscription } from 'rxjs/Subscription'; 
import { User } from '../../user.interface'; 

declare var $:JQueryStatic; 

@Component ({ 
    selector: 'calendar', 
    styleUrls: [ 
     'node_modules/fullcalendar/dist/fullcalendar.min.css' 
    ], 
    templateUrl: 'app/content/calendar/calendar.html', 
    providers: [AttendanceService, HttpService], 
    directives: [ROUTER_DIRECTIVES], 
    outputs: ['showIcon'], 
    encapsulation: ViewEncapsulation.None //Required for Fullcalendar 
}) 

export class calendarComponent implements OnInit { 
    public Attendance : Attendance[]; 
    getData: string; 
    postData: string; 
    //public signedIn: Subscription 
    public oUser: User; 
    public AttendanceRecords : Attendance[]; 
    public showIcon = new EventEmitter(); 

    constructor(private _AttendanceService: AttendanceService, private _http: HttpService) { 
     this.oUser = { 
      EmpID: '', 
      Firstname: '', 
      Middlename: '', 
      Lastname: '', 
      PrimaryEmail: '', 
      AlternateEmail: '' 
     }; 
     this.showIcon.emit({value: false}); 
     _http.signedInUser$.subscribe(
      data => { 
       this.oUser = data; 
       console.log(this.oUser); 
       //Send request to fetch events 
       _http.postEvents(this.oUser.EmpID) 
        .subscribe(
         data => this.AttendanceRecords = JSON.parse(data), 
         error => console.log("No Attendance records"), 
         () => { 
          this.renderCalendar(this.AttendanceRecords); 
         } 
        );    
      } 
     ); 
    } 

    public selectedDay = {}; 

    onSelect(day) { 
     this.selectedDay = day; 
    } 

    ngAfterViewInit() { 
     console.log("Requesting Calendar Component"); 
     this.onTestGet(); 
     this.postReq();  





     $(document).ready(function() { 
      console.log("chal gya");    

     });  
    } 

    ngAfterViewChecked() { 

    } 

    onTestGet() { 
     this._http.getAttendance() 
     // this._http.getAttendance(this.signedInUser.EmpID) 
      .subscribe(
       data => this.getData = JSON.stringify(data), 
       error => alert(error), 
       () => console.log(this.getData) 
      ); 
    } 


    postReq() { 
     this._http.postJSON() 
      .subscribe(
       data => this.postData = JSON.stringify(data), 
       error => alert(error), 
       () => console.log(this.postData) 
      ) 
    } 

    ngOnInit(): any { 
     this.getAttendance(); 
    } 

    //Function Definitions 
    getAttendance(){ 
     this._AttendanceService.getAttendance().then((Attendance: Attendance[]) => this.Attendance = Attendance); 
    } 

    renderCalendar(AttendanceRecords) { 
     console.log(this.AttendanceRecords); 
     var calendarDiv:any = $('#calendar'); 



     calendarDiv.fullCalendar({ 
      header: { 
       left: 'today prev,next', 
       center: 'title', 
       right: 'basicDay,basicWeek,month' 
      }, 
      events: [ 
       { 
        start: '2016-08-24', 
        end: '2016-08-28', 
        rendering: 'background', 
        color: '#257e4a' 
       } 
      ] 
     }); 
    } 
    // ngOnDestroy() { 
    // // prevent memory leak when component destroyed 
    // this.signedIn.unsubscribe(); 
    // } 
} 

calendar.html

<div id="calendar"></div> 

package.json

"dependencies": { 
    "@angular/common": "2.0.0-rc.4", 
    "@angular/compiler": "2.0.0-rc.4", 
    "@angular/core": "2.0.0-rc.4", 
    "@angular/http": "2.0.0-rc.4", 
    "@angular/platform-browser": "2.0.0-rc.4", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.4", 
    "@angular/router": "3.0.0-alpha.7", 
    "@angular/router-deprecated": "2.0.0-rc.2", 
    "@angular/upgrade": "2.0.0-rc.4", 
    "angular2-materialize": "^3.0.3", 
    "es6-shim": "^0.35.0", 
    "fullcalendar": "^2.9.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "systemjs": "0.19.27", 
    "zone.js": "^0.6.12" 
    }, 

Answer 1

Wenn der Konstruktor von calendarComponent ausgeführt wird und der Wert emittiert wird, dann ist das Ereignis (showIcon)="changeIconState($event);" nicht bindend noch eingerichtet.

Bewegen Sie einfach den Code

this.showIcon.emit({value: false}); 

zu

ngAfterViewInit() { 
this.showIcon.emit({value: false}); 
} 

Sie auch anderen Code dort bewegen können, wenn Sie es brauchen ausgeführt werden, nachdem das Ereignis ausgestrahlt wird. Sie können auch ngOnInit() anstelle von ngAfterViewInit() versuchen. Ich habe Ihr Beispiel nicht bis ins letzte Detail untersucht.