Угловой шаблон нижнего колонтитула CDK через ngTemplateOutlet - PullRequest
Новая
       23

Угловой шаблон нижнего колонтитула CDK через ngTemplateOutlet

1 голос
/ 18 мая 2019

Я пытаюсь создать универсальный шаговый компонент, используя Angular CDK Stepper, как упомянуто здесь https://material.angular.io/guide/creating-a-custom-stepper-using-the-cdk-stepper.

Я хочу передать шаблон верхнего и нижнего колонтитула шагового шаблона через ссылки на шаблоны с помощью ngTemplateOutlet.

Шаблоны не работают, когда я передаю им cdkStepperPrevious, cdkStepperNext в кнопках.

Код можно найти здесь https://stackblitz.com/edit/angular-bgyqqz-r8axmr

<ng-template #stepperHeader>
  <header>
    <h2> Header</h2>
  </header>
</ng-template>
<ng-template #stepperFooter>
    <button class="example-nav-button" cdkStepperPrevious>Next</button>
    <button class="example-nav-button" cdkStepperNext>Previous</button>
</ng-template>
<example-custom-stepper [headerTemplate]="stepperHeader" [footerTemplate]="stepperFooter">

  <cdk-step> <p>This is any content of "Step 1"</p> </cdk-step>
  <cdk-step> <p>This is any content of "Step 2"</p> </cdk-step>
</example-custom-stepper>

and in my example-custom-stepper component

<section class="example-container">
   <ng-container [ngTemplateOutlet]="headerTemplate"></ng-container>
  <div [style.display]="selected ? 'block' : 'none'">
    <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
  </div>

  <footer class="example-step-navigation-bar">
    <ng-container [ngTemplateOutlet]="footerTemplate"></ng-container>
  </footer>
</section>

Ошибка

preview-4adb70f742b91f09679fb.js: 1 Ошибка ОШИБКИ: StaticInjectorError (AppModule) [CdkStep -> CdkStepper]: StaticInjectorError (Платформа: ядро) [CdkStep -> CdkStepper]: поставщик NullStore!в NullInjector.get (injector.ts: 43) в resolToken (injector.ts: 346) в tryResolveToken (injector.ts: 288) в StaticInjector.get (injector.ts: 168) в resolToken (injector.ts: 346) вtryResolveToken (injector.ts: 288) в StaticInjector.get (injector.ts: 168) в resolNgModuleDep (ng_module.ts: 125) в NgModuleRef_.get (refs.ts: 507) в resolDep (provider.ts: 423)

...