Question

我正在尝试使用输入绑定将数据从父组件传递到子组件。这是一个简单的布尔字段。我按照Angular tutorial来完成它但我仍然无法从父组件到子组件获取任何内容。

另外我不知道它是否值得一提，起初我得到了以下错误然后我在我的app模块中添加了模式：[NO_ERRORS_SCHEMA]它就消失了。

下面是我要传递的变量的父组件.ts代码：

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

这是我想要传递的父组件html。

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

以下是我的子组件TS文件代码：

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

}

下面是我正在测试的HTML代码，用于访问varianble中的传递：

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

Answer 1

html中的属性名称应与@Input属性名称匹配。

尝试以下，

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

Answer 2

你应该在你的组件中做：

@Input('data') isAnAuthorizedUser;

然后在你的模板中

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

使用输入绑定

2 个答案: