Question

我有一个服务，我创建了一个名为value的变量。当用户单击该按钮时，它应该更新索引并更改视图中的数据。出于某种原因，服务中的值变量不会更新其他模板中的视图，但会在控制台中更新。谢谢你的帮助。

数据服务

@Injectable()
export class DataService {

value: number;

constructor() { 
this.value = 0;  // initialized at zero
}

Data(): Promise<Assignment[]> {
 return Promise.resolve(Assignments);
}

}

这是按钮组件，我想使用该服务使值等于index来更改视图中的数据。

buttoncomponent.html

<button (click)="goTo(Index)"></button>

ButtonComponent.ts

export class ButtonsComponent implements OnInit{

@Input() symbol:number;
@Input() show:boolean;
@Input() left: number;
@Input() buttonPos:number;
@Input() Index:number;

constructor(private dataService: DataService) { 
}


ngOnInit(): void {

}

// change index on click
goTo(index){
  this.dataService.value = index;
}

}

测试视图模板 我试图测试一下，看看数据是否会改变，但是它会停留在0。

<div id="titleArea" *ngIf="dataService.value==Index">
  <h1 class="sub"> {{ name }} </h1>
</div>

Angular 2：如何将服务中的变量共享到多个组件

0 个答案: