在输入（）不起作用

Question

我重新学习Angular中的一些东西，因为我因为其他的奉献而不得不离开它一段时间。 @Input()应该工作，但由于某种原因，它不是，我没有得到任何错误。

@Component({ 
    selector: 'app-loader', 
    templateUrl: './loader.component.html', 
    styleUrls: ['./loader.component.scss'] 
}) 
export class LoaderComponent implements OnInit { 

    @Input() isLoadings: boolean; 
    @Input() parentData = 'Data from parent'; 

    constructor() { } 

    ngOnInit() { } 

} 

子组件：

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.scss'] 
}) 
export class HomeComponent implements OnInit { 

    quote: string; 
    isLoading: boolean; 
    name: string; 
    childMessage: string; 

HTML：

<app-loader [isLoadings]="isLoading" [parentData]="childMessage">{{childMessage}}</app-loader> 

下面的作品。

[isLoadings]="isLoading" 

为什么不：

[parentData]="childMessage" 

Answer 1

孩子：LoaderComponent

@Input() parentData:string; 

父：HomeComponent

childMessage ='Data from parent'; 

@Input子组件应接收来自父组件的'消息'，而不是相反。 isLoading的作品，因为在这两个地方它= false（布尔类型的默认值），以及您为父母和孩子命名这两个属性的事实可能会误导你（但你可以保持这种方式）。

重构你的例子：

@Component({ 
    selector: 'app-loader', 
    templateUrl: './loader.component.html', 
    styleUrls: ['./loader.component.scss'] 
}) 
export class LoaderComponent implements OnInit { 

    @Input() isLoadings: boolean; 
    @Input() parentData = ''; 

    constructor() { } 

    ngOnInit() { } 

} 

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.scss'] 
}) 

export class HomeComponent implements OnInit { 
    quote: string; 
    isLoading: boolean; 
    name: string; 
    childMessage ='Data from parent'; 

.....