1

I create a component in angular 9, and I use in the component to inject the html. so far, it's still very normal ( render html correctly). but after I add parameter in constructor, then the html in component not render in browser, only render the ng-container content in the browser. how can i do?

I have tried to remove constructor parameter, then the component render correctly.. but i need to import render2 and elementRef in component, so I cannot do this way

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>

but when render in chrome the html in component not render in browser....

<div nav-item>
content text
<!--ng-container-->
detail detail text
<!--ng-container-->
</div>

the correct render is like following

<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>
Bill P
  • 3,622
  • 10
  • 20
  • 32
user2956843
  • 177
  • 1
  • 10
  • What's the question here? What have you done so far? – Thingamajig Sep 30 '19 at 02:57
  • my html in component not render in browser after i add constructor parameter. the correct rendrer is like
    content text
    – user2956843 Sep 30 '19 at 03:01
  • errors in console?? – joyBlanks Sep 30 '19 at 03:21
  • has one error but I think it is not related about this problem ng-validate.js:1 Uncaught TypeError: ng.probe is not a function at Object.e.isDebugMode (ng-validate.js:1) at l (ng-validate.js:24) at Object.602 (ng-validate.js:24) at r (ng-validate.js:1) at Object.603 (ng-validate.js:24) at r (ng-validate.js:1) at ng-validate.js:1 at ng-validate.js:1 Except this, no error in console – user2956843 Sep 30 '19 at 03:31
  • Mind you share your code on https://stackblitz.com – Tony Ngo Sep 30 '19 at 06:28

0 Answers0