Question

考虑以下模板，我的自定义指令＆＃34; scrollEffect＆＃34;提供了两个模板引用@Input：

参考组件（pageContent）
对元素的引用（inflowTokensaleJoin）

正确引用该组件。但是，普通元素不是。我们不能定位组件，指令和普通dom元素吗？如果是这样，我的代码错了，看不清楚原因。

welcome.html

<ion-content #pageContent>
  <div [scrollEffect]="showFixedToolbarFrom" [scrollContent]="pageContent" [siblingComponent]="inflowTokensaleJoin" class="join fixed">

    ...

    <div #inflowTokensaleJoin *ngIf="!(icoService.isICOEnded()) && (icoStartDate$ | async) > 0" fxLayout="row" fxLayoutAlign="end"

    ...
</ion-content>

滚动effect.ts

@Input('siblingComponent') siblingComponent: ElementRef;

ngAfterViewInit() {
  if (this.siblingComponent) {
    console.log('sibling found');
  }

Answer 1

好的，找到了我的错误。

我正在使用async * ngIf，这会导致在填充异步条件之前评估一次性模板引用var book=mongoose.model("book",{ name: {type: String}, author: {type: String} }); con.query('select * from booktable', function(err, result){ if(!err) { //it shows 10 book records in result console.log(util.inspect(result, false, null)) var temp=util.inspect(result, false, null); var tc=temp.length; for(i=0; i<tc; i++){ //i get error here saying can not read property '0' of undefined console.log(temp[i].author); } } else { console.log(err); } }（相当于@ViewChild）。然后在元素附加到DOM之前运行。

要解决这个问题：我们必须知道模板引用是（幕后）@ViewChild。它在组件初始化时运行。

@ViewChildren没有返回ElementRef而是返回QueryList。 QueryList在组件的整个生命周期中保持最新（它更耗费资源，但适用于这种情况）。因此，我将以下内容添加到父组件中：

 Error say   TypeError: Cannot read property '0' of undefined.

siblingComponent提供了一个查询 - 每次更新区域时都会刷新。这意味着每当我需要兄弟元素时，可以运行以下代码来获取该时刻的查询结果（相对于viewInit时间）：

@ViewChildren('inflowTokensaleJoin') siblingQuery: QueryList<ElementRef>;

Angular（2+）：关于非组件

1 个答案: