问题描述
最近，我按照Angular 9的角度更新指南here进行了更新。我更新了core，cli，material，cdk，ngrx等，并进行了“ ng update”以确保一切都已正确迁移。
然后我编译并构建了它，没有任何错误/警告，一切正常，除了 cdk stepper ，它没有显示任何cdk步骤和内容
<cdk-stepper></cdk-stepper>
但是在Angular 9中它可以正常工作
这是我的自定义cdk步进器组件.ts和html：
import { animate,AnimationEvent,state,style,transition,trigger } from '@angular/animations';
import { CdkStepper,StepContentPositionState } from '@angular/cdk/stepper';
import { AfterContentinit,ChangeDetectionStrategy,Component,EventEmitter,Input,Output } from '@angular/core';
import { Subject } from 'rxjs/internal/Subject';
import { distinctUntilChanged,takeuntil } from 'rxjs/operators';
@Component({
selector: 'cdk-stepper',templateUrl: './cdk-stepper.component.html',styleUrls: ['./cdk-stepper.component.scss'],providers: [{ provide: CdkStepper,useExisting: CdkStepperComponent }],animations: [trigger('stepTransition',[
state('prevIoUs',style({
transform: 'translateY(-100%)',zIndex: -1,opacity: 0
})),state('current',style({
transform: 'translateY(0)',zIndex: 0,opacity: 1
})),state('next',style({
transform: 'translateY(100%)',transition('* => *',animate('700ms cubic-bezier(0.35,0.25,1)'))
])],changeDetection: ChangeDetectionStrategy.OnPush,})
export class CdkStepperComponent extends CdkStepper
implements AfterContentinit {
currentVerticalLine = {
'height': '20vh','transition': 'height 200ms ease','top': '-3%'
}
@Output() readonly animationDone: EventEmitter<void> = new EventEmitter<void>();
_animationDone = new Subject<AnimationEvent>();
@input() stepHeaderNumber;
stepHeaderTitle = ['Scan Tenant','MailBox Rules','Audit Logs','Summary']
@Input('setSelectedindex') set setSelectedindex(index: number) {
this.updateIndex(index);
}
@Output() updateMyIndex: EventEmitter<number> = new EventEmitter();
updateIndex(index: number) {
console.log(index)
this.selectedindex = index;
this.updateMyIndex.emit(index);
}
onClick(index: number): void {
this.selectedindex = index;
}
ngAfterContentinit() {
console.log(this.steps)
// Mark the component for change detection whenever the content children query change
this.steps.changes.pipe(takeuntil(this._destroyed)).subscribe(() => {
this._stateChanged();
});
this._animationDone.pipe(
// distinctUntilChanged to avoid emitting the same event twice,// as some browsers callback invokes '.done' twice.
distinctUntilChanged((x,y) => {
return x.fromState === y.fromState && x.toState === y.toState;
}),takeuntil(this._destroyed)
).subscribe(event => {
if ((event.toState as StepContentPositionState) === 'current') {
this.animationDone.emit();
}
});
}
checkProgress(index) {
if (this.selectedindex > index) {
return true;
}
else {
return false;
}
}
}<div class="container">
<app-vertical-steps [steps]="steps" [titles]="stepHeaderTitle" [(current)]="selectedindex" (currentChange)="updateIndex($event)"></app-vertical-steps>
<div class="cdk-vertical-content-container">
<div *ngFor="let step of steps; let i=index;" class="cdk-vertical-content ng-trigger ng-trigger-stepTransition"
[@stepTransition]="_getAnimationDirection(i)" [attr.tabindex]="selectedindex === i ? 0 : null"
[id]="_getStepContentId(i)" (@stepTransition.done)="_animationDone.next($event)"
[attr.aria-labelledby]="_getStepContentId(i)" [attr.aria-expanded]="selectedindex === i">
<mat-card class="cdk-card" [class.hidden]="selectedindex !== i">
<ng-container [ngTemplateOutlet]="step.content"></ng-container>
</mat-card>
</div>
</div>
</div>以下是我的父组件容器，它使用cdk-stepper作为子组件：
import { Component,OnDestroy,OnInit } from "@angular/core";
import { select,Store } from '@ngrx/store';
import { combineLatest } from 'rxjs';
import { GraphActions } from 'src/app/actions';
import { fetchSummaries } from 'src/app/entities/event-summary/event-summary.actions';
import * as fromroot from 'src/app/reducers';
@Component({
selector: "app-container",templateUrl: "./container.component.html",styleUrls: ["./container.component.scss"]
})
export class ContainerComponent implements OnInit,OnDestroy {
pending = false;
myIndex = 0;
constructor(
private store: Store<fromroot.State>
) { }
ngOnInit() {
combineLatest(
this.store.pipe(select(fromroot.getinitialized)),this.store.pipe(select(fromroot.inBoxRulesFetched)),this.store.pipe(select(fromroot.getUsers))
).subscribe(([initialized,fetched,users]) => {
if (initialized) {
this.store.dispatch(fetchSummaries());
if (!fetched) {
for (let index = 0; index < users.length; index++) {
const identity = users[index].id;
const mail = users[index].mail;
if (mail !== null && users[index].userType !== 'Guest') {
this.store.dispatch(GraphActions.fetchGraphInBoxRules({ identity }))
}
}
}
}
})
}
ngOnDestroy() {
}
setIndex($event) {
this.myIndex = $event;
}
setPendingScan($event) {
this.pending = $event;
}
}<div class="container">
<app-log-scanning-icon [pendingScan]="pending"></app-log-scanning-icon>
<cdk-stepper [setSelectedindex]="myIndex" (updateMyIndex)="setIndex($event)">
<cdk-step>
<app-introduction (indexChange)="setIndex($event)" (pendingScan)="setPendingScan($event)"></app-introduction>
</cdk-step>
<cdk-step>
<app-mailBoxes (indexChange)="setIndex($event)" [currentStep]="myIndex === 1"></app-mailBoxes>
</cdk-step>
<cdk-step>
<app-audit-logs (indexChange)="setIndex($event)" [currentStep]="myIndex === 2"></app-audit-logs>
</cdk-step>
<cdk-step>
<app-summary (indexChange)="setIndex($event)" [currentStep]="myIndex === 3"></app-summary>
</cdk-step>
</cdk-stepper>
</div>如果有人可以提供帮助或提供任何提示，说明为什么它在angular 10上不起作用，我将不胜感激。 还是我的代码的任何部分被委派了？谢谢。
P.S。这是我的package.json版本列表：package.json
解决方法
升级到angular 10后，我遇到了同样的问题。它曾经引起错误，无法访问未定义的内容。基本上没有设置选定的值。多次尝试调试问题后，我将@ angular / cdk版本降级为10.0.0，它可以正常工作。尝试降级cdk版本。最新版本有问题。
,遇到同样的问题。 问题是您的CdkStepperComponent组件中的ngAfterContentInit（）。在版本10中，您必须调用CdkStepper父类的super.ngAfterContentInit（），显然，从版本10开始，将使用此方法初始化步骤。