在 angular 8 中使用@input 装饰器将数据从父组件传递到子组件

Question

你好，我想将一个数字从一个组件传递到另一个组件，我正在使用@input。

这是我的父组件：

@Component({

    selector: 'inter-asp',
    styleUrls: [('./asp.component.scss')],
    templateUrl: './asp.component.html',
    template: '<app-my-dialog [hellovariable]="hellovariable"></app-my-dialog>',
    providers: [PaginationConfig],
})

export class aspComponent implements OnInit {
    public hellovariable: number = 100;

}

这是我的子组件：

 @Component({
      selector: 'app-my-dialog',
      templateUrl: './my-dialog.component.html',
      styleUrls: ['./my-dialog.component.css']
    })
    export class MyDialogComponent implements OnInit {

      @Input() hellovariable: number;
}

在子组件中，我想显示从父组件传递的变量 hellovariable 的内容，但我得到未定义，它没有传递，所以这里有什么问题。

Answer 1

它优先于模板url，删除该部分并将其作为

@Component({
    selector: 'inter-asp',
    styleUrls: [('./asp.component.scss')],
    template: '<app-my-dialog [hellovariable]="hellovariable"></app-my-dialog>',
    providers: [PaginationConfig],
})

STACKBLITZ DEMO

Answer 2

在父模板中，您必须将输入作为子组件的属性传递给子组件

<app-child-component [prop]="prop"></app-child-component>

在 angular 8 中使用@input 装饰器将数据从父组件传递到子组件

Pass data from parent component to child component using @input decorator in angular 8

javascript

html

angular

angular-decorator