1

假设它们是 2 个组件。父组件 page和子组件field。我想将inputhtml 标记/元素从传递page到field使用内容投影。然后在field组件内部我想修改传递的inputhtml 元素属性。例如，将字段最大/最小长度设置为硬编码长度并将（模糊）事件绑定到函数。

代码示例。

在 page.component 中：

 @Component({
  selector: 'page',
  templateUrl: `
  <field>
    <input type="text">
  </field>`
})
export class PageComponent  {}

在字段组件中：


@Component({
  selector: 'field',
  template: `
  <ng-content  select="input"></ng-content>
  `
})
export class FieldComponent  {
  length = 14;
  onBlur()
  {
    console.log('blured');
  }
}

我试图做这样的事情（显然没有奏效），但希望它能让我的观点更清楚

@Component({
  selector: 'field',
  template: `
  <ng-content maxLength="length" minLength="length" (blur) ="onBlur()" select="input"></ng-content>
  `
})
export class FieldComponent  {
  length = 14;
  onBlur()
  {
    console.log('blured');
  }
}

注意：我找不到如何做到这一点的方法/技术/模式。搜索像上面的标题这样的词只会将我引导到教授如何使用内容投影或高级用例的文章，而这不是其中的一部分。也许我找不到正确的术语来搜索它。如果是这样，请告诉我这个过程的名称是什么。提前致谢。

4

0 回答 0