角2变量无法访问

Question

我正在开发一个按钮，它获得动画并且其外观由当前Viewmode（卡或列表）更改。

我有这样的代码在我的TS文件：

export enum ViewMode { 
    List, 
    Card 
} 

@Component({ 
    selector: 'app-viewchanger', 
    templateUrl: './viewchanger.component.html', 
    styleUrls: ['./viewchanger.component.scss'], 
    animations: [ 
     trigger('ActiveViewMode', [ 
      state('inactive', style({ 
       color: 'mat-color($mat-grey, 50)', 
       background: 'transparent' 
      })), 
      state('active', style({ 
       color: 'mat-color($mat-grey, 900)', 
       background: 'mat-color($mat-grey, 50)' 
      })), 
      transition('inactive => active', animate('500ms ease')), 
      transition('active => inactive', animate('500ms ease')) 
     ]) 
    ] 
}) 
export class ViewchangerComponent implements OnInit { 
    state = 'inactive'; 
    viewModes = ViewMode; 
    @Input() viewMode = ViewMode.List; 
    @Output() ViewModeChange = new EventEmitter<ViewMode>(); 
    @ContentChild(CardviewDirective) cardTemplate: CardviewDirective; 
    @ContentChild(ListviewDirective) listTemplate: ListviewDirective; 

    ngOnInit() { 
    } 

    changeViewMode(viewMode: ViewMode) { 
     this.viewMode = viewMode; 
     this.ViewModeChange.next(viewMode); 
    } 

    get activeTemplate() { 
     if (this.viewMode === ViewMode.Card) { 
      return this.cardTemplate ? this.cardTemplate.templateRef : undefined; 
      this.state = (this.state === 'inactive' ? 'active' : 'inactive'); 
     } 
     return this.listTemplate ? this.listTemplate.templateRef : undefined; 
     this.state = (this.state === 'inactive' ? 'active' : 'inactive'); 
    } 

} 

而这一次在我的HTML：

<div class="viewchange-container"> 
    <i class="fa fa-th" (click)="changeViewMode(viewModes.Card)" [@ActiveViewMode]='state'></i> 
    <i class="fa fa-list" (click)="changeViewMode(viewModes.List)" [@ActiveViewMode]='state'></i> 
</div> 

<ng-template [ngTemplateOutlet]="activeTemplate"></ng-template> 

我的问题是获得activeTemplate（）函数不能达到的状态变量（如果我在另一个函数中使用它，但没有返回它，我想同时实现切换视图和状态

Answer 1

return之后的任何代码都不会被调用 - 这发生在activeTemplate

更改顺序的末尾是：

get activeTemplate() { 
    if (this.viewMode === ViewMode.Card) { 
     this.state = (this.state === 'inactive' ? 'active' : 'inactive'); 
     return this.cardTemplate ? this.cardTemplate.templateRef : undefined; 
    } 
    this.state = (this.state === 'inactive' ? 'active' : 'inactive'); 
    return this.listTemplate ? this.listTemplate.templateRef : undefined; 
}