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应该会收到“＆＃39;消息＆＃39;来自父组件，而不是相反。 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';

.....

在input（）不起作用

1 个答案: