Question

问题：如果子组件存在并设置触发UI更新，则设置父组件的属性

使用@output的大多数示例都使用嵌套组件。我的方案是，通过router-outlet调用嵌套组件。

如果路由是＆＃34; / calendar＆＃34;我正在尝试将iconStatus属性设置为false，否则为true。

更新语句this.showIcon.emit({value: false});正在被触发，但日历（子）组件中的变量showIcon未正确发送到内容（父）组件

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

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.component.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

执行calendarComponent的构造函数并发出值时，尚未设置事件绑定(showIcon)="changeIconState($event);"。

只需移动代码

即可

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

到

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

如果您需要在发出事件后执行其他代码，也可以移动其他代码。

您也可以尝试使用ngOnInit()代替ngAfterViewInit()。我没有调查你的例子到最后的细节。

从子组件变量设置父组件变量

1 个答案: