angular 9でコンポーネントを作成し、コンポーネントで使用してhtmlを挿入します。これまでのところ、それはまだ非常に正常です(htmlを正しくレンダリングします)。しかし、コンストラクターにパラメーターを追加した後、コンポーネントの html はブラウザーでレンダリングされず、ブラウザーで ng-container コンテンツのみがレンダリングされます。どのようにできるのか?
コンストラクターパラメーターを削除しようとしましたが、コンポーネントは正しくレンダリングされます..しかし、コンポーネントにrender2とelementRefをインポートする必要があるため、この方法では実行できません
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.900.0-next.5
@angular-devkit/build-angular 0.900.0-next.5
@angular-devkit/build-ng-packagr 0.900.0-next.5
@angular-devkit/build-optimizer 0.900.0-next.5
@angular-devkit/build-webpack 0.900.0-next.5
@angular-devkit/core 9.0.0-next.5
@angular-devkit/schematics 9.0.0-next.5
@angular/cli 9.0.0-next.5
@ngtools/webpack 9.0.0-next.5
@schematics/angular 9.0.0-next.5
@schematics/update 0.900.0-next.5
ng-packagr 5.5.1
rxjs 6.4.0
typescript 3.5.3
webpack 4.40.2
myComponent.component.ts
@Component({
selector: '[nav-item]',
templateUrl: './myComponent.component.html',
styleUrls: ['./myComponent.component.scss'],
encapsulation: ViewEncapsulation.None
})
....
constructor(private _renderer: Renderer2) {
console.log('hee',_renderer);
}
myComponent.component.html
<div class="nav_list_item--level1" >
<a href="#" #navItemContent class="nav_list_item_content nav_list_item_content--level1" >
<ng-content select="[nav-content]"></ng-content>
</a>
<div #navItemDetail class="nav_list_item_detail nav_list_item_detail--level1">
<ng-content select="[nav-detail]"></ng-content>
</div>
</div>
app.component.html
<div nav-item>
<ng-container nav-content>
content text
</ng-container>
<ng-container nav-detail>
<div style="width: 800px;">
detail detail text
</div>
</ng-container>
</div>
しかし、クロムでレンダリングすると、コンポーネントのhtmlがブラウザでレンダリングされません....
<div nav-item>
content text
<!--ng-container-->
detail detail text
<!--ng-container-->
</div>
正しいレンダリングは次のようなものです
<div nav-item>
<a href="#" #navItemContent class="nav_list_item_content nav_list_item_content--level1" >
content text
</a>
<div #navItemDetail class="nav_list_item_detail nav_list_item_detail--level1">
detail detail text
</div>
</div>