Angular:异步管道在与 View 交互之前不更新 View

Question

我有一个简单的服务 (ActionBarService)，它发出 TemplateRefs。在我的应用程序组件中，我使用 async 管道订阅流。该值按预期发出并记录，但在我以某种方式与页面交互之前， View 不会更新和呈现新模板。代码如下，先谢谢了!

Action 条服务:

@Injectable({
  providedIn: 'root'
})
export class ActionBarService {
  actionBarTemplate$: BehaviorSubject<TemplateRef<any>>;

  constructor() {
    this.actionBarTemplate$ = new BehaviorSubject(null);
  }

  getTemplate(): BehaviorSubject<TemplateRef<any>> {
    return this.actionBarTemplate$;
  }

  setTemplate(actionBarTemplate: TemplateRef<any>) {
    this.actionBarTemplate$.next(actionBarTemplate);
  }
}

应用组件 html:

 <ng-container *ngIf="actionbarTemplate$ | async as actionbarTemplate">
      <ng-container [ngTemplateOutlet]="actionbarTemplate"></ng-container>
  </ng-container>

应用组件

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, DoCheck {
  title = 'Lets Train';
  @ViewChild('toolbar')
  primaryToolbar: ElementRef;
  toolbarHeight: number;
  actionbarTemplate$: BehaviorSubject<TemplateRef<any>>;

  constructor(public responsiveService: ResponsiveService, private actionBarService: ActionBarService, private router: Router) {
    this.onResize();
  }

  ngOnInit(): void {
    this.actionbarTemplate$ = this.actionBarService.getTemplate();
    this.actionbarTemplate$.subscribe(r => console.log(r));
  }

  ngDoCheck() {
    this.toolbarHeight = this.primaryToolbar.nativeElement.offsetHeight;
  }

  onRouteChange() {
    this.router.events.subscribe(r => {
      if (this.actionbarTemplate$.getValue() != null) {
        this.actionbarTemplate$.next(null);
      }
    });
  }

  @HostListener('window:resize', ['$event'])
  onResize(event?) {
    const screenSize = ScreenSizeUtils.getScreenSize(window.innerWidth);
    this.responsiveService.setScreenSize(screenSize);
  }

向服务发送值的组件:

@Component({
  selector: 'lt-program-template-view',
  templateUrl: './program-template-view.component.html',
  styleUrls: ['./program-template-view.component.scss']
})
export class ProgramTemplateViewComponent implements OnInit, AfterViewInit {
  program$: Observable<ProgramTemplate>;
  routeData: RouteData;
  calloutCard: CalloutCard;

  @ViewChild('actionBar')
  actionBarTemplate: TemplateRef<any>;

  constructor(route: ActivatedRoute, private router: Router, private actionbarService: ActionBarService
    , private programService: ProgramTemplateService) {}

  ngOnInit() {
    this.buildRouteData();

  }

   ngAfterViewInit(): void {
    this.actionbarService.setTemplate(this.actionBarTemplate);
  }

  updateProgram() {

  }

  delete(program: ProgramTemplate) {
    this.programService.delete(program);
  }

  buildRouteData() {
    this.routeData = new RouteData('Programs', ['/program', 'programindex'], null);
  }
}

发出组件 html

<div fxLayout="column" fxLayoutGap="15px">
  <lt-info-card [calloutCard]="calloutCard" (formSaveEmitter)="updateProgram()"></lt-info-card>

</div>

<ng-template #actionBar>
  <mat-toolbar color="primary" class="nav-bar mat-elevation-z2" ngClass.xs="neg-top-margin"
      ngClass.gt-xs="neg-margin">
      <navigation-button [routeData]="routeData"></navigation-button>
      <responsive-button [label]="'Delete'" [icon]="'delete'" (click)="delete()"></responsive-button>
  </mat-toolbar>
</ng-template>

Answer 1

如果有人遇到类似情况，我不能保证这会适用于您 - 但就我而言，问题似乎是我的一个模块中存在一些隐藏的依赖项错误。