使用输入绑定将数据从父组件传递到子组件时出错

Question

I am trying to pass data from parent component to child component using input binding. It is a simple boolean field. I followed this Angular tutorial to accomplish it but I am still not able to get anything from parent to child component.

Also I dont know if its worth mentioning, at first I was getting the below error then I added schemas: [NO_ERRORS_SCHEMA] in my app module and it went away.

Below is my parent component.ts code for the variable I want to pass:

 public isAnAuthorizedUser: boolean = true;

   ngOnInit(): void {

        if (test != null) {
            console.log("Inside NGOnInit on page 1");
            this.route.params
                .switchMap((params: Params) => this._Service.getRequestById(+params['id']))
                .subscribe(
                data => {
                    this.Model = data;
                    if (this.Model.isAuthorizedToView != true)
                    {
                        this.isAnAuthorizedUser = false;
                        this._router.navigate(['/dashboard']);
                    }
        }

Here is my parent component html that I am trying to pass.

 <div>
                <isAnAuthorizedUser [data]="isAnAuthorizedUser"></isAnAuthorizedUser>
            </div>

Below is my child component TS file code:

   import { Component, OnInit, Input, Injectable, ViewChild  } from '@angular/core'
import {
    FormsModule,
    ReactiveFormsModule,
    FormGroup,
    FormControl
} from '@angular/forms';
import { HttpModule } from '@angular/http';

@Component({
    moduleId: module.id,
    selector: 'ReservationFormPage1',
    templateUrl: './ReqDashboard.html'
    ,
    providers: [ReqFormService, CompleteRequestService, IncompleteRequestService]
})

export class ReservationDashboardComponent implements OnInit {

    @Input()
    isAnAuthorizedUser: boolean;
                ngOnInit(): void {
                    console.log(this.isAnAuthorizedUser);
    }

}

Below is the HTML code where I am testing to access my pass in varianble:

 <div *ngIf ="isAnAuthorizedUser">
        <span>{{this.isAnAuthorizedUser}}</span>
    </div>

Answer 1

the property name in html should match the name of your @Input property name.

try below,

<isAnAuthorizedUser [isAnAuthorizedUser]="isAnAuthorizedUser"></isAnAuthorizedUser>

Answer 2

You should do in your component:

@Input('data') isAnAuthorizedUser;

and then in your template

<isAnAuthorizedUser [isAnAuthorizedUser]="true"></isAnAuthorizedUser>