Angular ngRouterOutlet和组件生命周期使用自定义模板渲染的问题

简短的回答

我怀疑这是由于生命周期和缺乏模板 首先渲染，

你说的完全正确.您只需更新您的@ViewChild个修饰符，使其使用{static: true}而不是{static: false}

更新的Stackblitz编辑器视图:https://stackblitz.com/edit/stackblitz-starters-co2me9?file=src%2Ftable%2Ftable.component.ts

更新的Stackblitz应用程序共享链接:https://stackblitz-starters-co2me9.stackblitz.io

Long answer: Lifecycle hooks and @ViewChild {static: true/false}

根据docs，ViewChild修饰符元数据的static: boolean属性指示何时在更改检测之前(在ngOnInit中)或在更改检测之后(在ngAfterViewInit中)解析视图查询，并且其缺省值为FALSE.

我建议您总是try 使用{static: true}，除非您绝对不能使用.这种方法的主要好处是不需要使用额外的生命周期挂钩(如ngAfterViewInit).如果您的元素是动态呈现的(例如:组件模板中的元素位于*ngIf或*ngFor内)，则不能使用static:true.换句话说，如果元素不是动态的，那么它就是静态的.

在本例中，您的所有默认列模板都是静态(而不是动态)ng模板，它们位于表的底部.组件.html，因此您应该用static:true来引用它们

您还可以在现有的日志(log)中看到，您已经在其中添加了大多数组件生命周期挂钩(以及getTemplate个组件函数中的日志(log)).组件模板中使用了getTemplate函数，它将在ngAfterViewInit钩子之前运行该函数，并且因为您当前使用的是static:false，所以要记录的ViewChild引用在ngAfterViewInit内的LOG语句之前是未定义的.

Side Answer RE: ExpressionChangedAfterItHasBeenChecked

对于docs，这是一个仅在开发模式下引发的错误，特别是由在开发模式下运行的额外更改检测周期引起的.因此，只要您使用生产配置(例如:ng build --prod)构建和部署应用程序，您就不会看到错误.

然而，在应用程序的部署版本中，你不会在控制台中看到这些错误日志(log)，这并不意味着你可以在开发过程中简单地忽略它们.您看到的这个特定的错误仍然会发生，只是您不会看到ExpressionChangedAfterItHasBeenChecked错误.