动态插入ng-content选择

时间:2019-11-22 16:59:04

标签: angular dynamic transclusion ng-content

简而言之,我想将选择值传递到ng-content的组件中作为输入。它应该看起来像这样:

父母:

<child-component [selectedValue]="['[selectedHtml1]','[selectedHtml2]']">
  <div selectedHtml1>I'm inside!!</div>
  <div selectedHtml2>I'm inside also!!</div>
</child-component>

child-html:

<ng-content *ngFor="let value of selectedValue" select="{{value}}">

child-ts:

@Input() selectedValue: string[];

但是当我这样做时,我得到一个错误提示

compiler.js:2175 Uncaught Error: Template parse errors:
Can't bind to 'select' since it isn't a known property of 'ng-content'.
1. If 'select' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
    </mat-paginator>
  </div>
  <ng-content [ERROR ->]select="{{selectedValue}}"></ng-content>
</mat-card>
"): ng:///[path to my component]@[component line]
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11388)
    at JitCompiler._parseTemplate (compiler.js:25961)
    at JitCompiler._compileTemplate (compiler.js:25949)
    at compiler.js:25893
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25893)
    at compiler.js:25806
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25805)

使用普通的包含语法可以做到这一点,那为什么不呢?

1 个答案:

答案 0 :(得分:1)

在您的html

<ng-content #select="{{selectedValue}}">

和.ts

@ViewChild(select)
相关问题