Question

我正在尝试用Angular编写Web组件，但似乎无法弄清楚如何将数据传递到组件中。

<my-component someId="1234"></my-component>

我希望找到某种方式来实现这一点，并在我的角度组件中获取someId。是否可以实现此功能，还是应该尝试使用插槽？为了清楚起见，我要问的是如何使用角形而不是普通角形组件制作Web组件。

Answer 1

您应该使用Angular的data binding

<my-component [id]="1234"></my-component>

在子组件上，利用@Input decorators

export class MyComponent {
  @Input('id') id: string;
}

Answer 2

您需要使用在共享组件中声明的@Input（）变量。

export class MyComponent {
 @Input() someId: string = '1234';//default value
}

// HTML

<my-component someId="1234"></my-component>

“ someId”是可选的输入参数，也可以忽略。

编辑：在将某些常量字符串或数字绑定到输入的情况下，不必在方括号中指定。您可以使用与普通html属性相同的语法。

Answer 3

我遇到了这个问题大约两天，最后我找到了解决方案。

您需要做的是在您的子组件（您要公开的网络组件）中使用 ngOnChanges() 方法。因为这是为了检测 @Input() 字段的任何变化。

这里我留下了我的网络组件的代码片段：

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

  @Input() domain;

  @Output() response = new EventEmitter<string>();

  constructor() {
  }

  ngOnInit(): void {
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.domain) {
      console.log("Domain URL: ", this.domain);  
      this.response.emit(this.domain);
    }
  }

}

将数据传递到Angular Web组件

3 个答案: