Clarity 3 升级：TreeFocusManagerService 上的 NullInjectorError

Question

今天我将我的项目从 Angular8/Clarity2 更新到 Angular9/Clarity3 并导航应用程序，我注意到我修复了一些问题，但现在我遇到了 NullInjectorError：

    ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[TreeFocusManagerService -> TreeFocusManagerService -> TreeFocusManagerService]: 
  NullInjectorError: No provider for TreeFocusManagerService!
Error: NullInjectorError: No provider for TreeFocusManagerService!
    at NullInjector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.NullInjector.get (core.js:937) [angular]
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (core.js:11565) [angular]
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (core.js:11565) [angular]
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (core.js:11565) [angular]
    at NgModuleRef$1.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.NgModuleRef$1.get (core.js:24827) [angular]
    at Object.get (core.js:23063) [angular]
    at getOrCreateInjectable (core.js:3848) [angular]
    at Module.ɵɵdirectiveInject (core.js:14369) [angular]
    at NodeInjectorFactory.ClrTreeNode_Factory [as factory] (clr-angular.js:19067) [angular]
    at getNodeInjectable (core.js:3956) [angular]
    at instantiateAllDirectives (core.js:8407) [angular]
    at createDirectivesInstances (core.js:7774) [angular]
    at Module.ɵɵelementStart (core.js:14518) [angular]
    at FundTypeModelWizardComponent_Template (fund-type-model-wizard.component.html:193) [angular]
    at resolvePromise (zone.js:832) [angular]
    at resolvePromise (zone.js:784) [angular]
    at :4200/polyfills.js:11081:21 [angular]
    at Object.onInvokeTask (core.js:28122) [angular]
    at drainMicroTaskQueue (zone.js:601) [<root>]
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:507) [<root>]
    at invokeTask (zone.js:1671) [<root>]
    at HTMLAnchorElement.globalZoneAwareCallback (zone.js:1697) [<root>]

相关模板代码为：

<clr-wizard-page #page1 [clrWizardPageNextDisabled]="pageOneDisabled">
    <ng-template clrPageTitle>Scelta asset</ng-template>
    <clr-tree-node *ngIf="assets">
        Asset
        <ng-template [clrIfExpanded]="true">
            <clr-tree-node *ngFor="let asset of assets" [(clrSelected)]="asset.selected">
                {{asset.description}}
            </clr-tree-node>
        </ng-template>
    </clr-tree-node>
</clr-wizard-page>

这里我在 TS 文件中还有另一个问题：

this.wizard.navService.goTo(this.wizard.navService.pageCollection.firstPage);

这是日志：

ERROR TypeError: Cannot read property 'navService' of undefined
    at FundTypeModelWizardComponent.push../src/app/modules/flows/components/fund-type-model/fund-type-model-wizard/fund-type-model-wizard.component.ts.FundTypeModelWizardComponent.initComponentsState (fund-type-model-wizard.component.ts:144)
    at SafeSubscriber._next (fund-type-model-wizard.component.ts:82)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:192)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
    at Subject.push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (Subject.js:47)
    at FundTypeModelWizardService.push../src/app/modules/flows/services/fund-type-model-wizard.service.ts.FundTypeModelWizardService.openWizard (fund-type-model-wizard.service.ts:16)
    at SafeSubscriber._next (fund-model-customization-grid.component.ts:152)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:192)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:130)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:76)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:53)

但我目前不知道这两个问题在某种程度上是相关的。

我能做什么？？提前致谢！

Answer 1

尝试使用清晰的完整层次结构。我也遇到了同样的问题，它消耗了我半天的时间。你的代码应该是这样的

<clr-wizard-page #page1 [clrWizardPageNextDisabled]="pageOneDisabled">
    <ng-template clrPageTitle>Scelta asset</ng-template>
       <clr-tree>
          <clr-tree-node *ngIf="assets">
          Asset
           <ng-template [clrIfExpanded]="true">
            <clr-tree-node *ngFor="let asset of assets" [(clrSelected)]="asset.selected">
                {{asset.description}}
            </clr-tree-node>
           </ng-template>
         </clr-tree-node>
       </clr-tree>
</clr-wizard-page>

添加 clr-tree 标记为我解决了这个问题。看看这是否有帮助。