问题描述
我有一个带有仪表板的 Angular 应用程序和一些可以通过路由器链接导航到的组件。
例如 仪表板 设备
路由工作正常,我唯一的问题是当我在组件之间路由时,我的 ngOninit 中的订阅没有加载。它只在页面刷新时加载。我已经把它缩小到这段没有加载的代码。 此代码在我的 device1.componenet.ts 中
private subs: Subscription[] = [];
localData: any[] = [];
constructor(private socketService: SocketService) {
}
ngOnInit() {
console.log('onInit');
this.subs.push(
this.socketService.getinitialData().subscribe((data: ServerResponse) => {
this.localData = data.prods;
console.log('Subbed2');
})
);
console.log('Subbed2');重新加载页面时显示在控制台中,但在组件之间导航时不显示。
知道为什么此订阅不适用于路由吗?
正在订阅 socket.service.ts 的服务
export class SocketService {
constructor(private socket: Socket) { }
getinitialData() {
return this.createObserver('initial');
}
private createObserver(event: string) {
return this.socket.fromEvent(event);
}
2 个主要组件是仪表板和设备 1。显示订阅的设备 1。仪表板没有什么特别的,只是一些视觉效果和一个链接到设备组件的链接。
device1.componenet.ts
@Component({
selector: 'app-devices',templateUrl: './device1.component.html',styleUrls: ['./device1.component.css']
})
export class Device1Component implements OnInit,OnDestroy {
devices: Devices[] = [];
// Devices array from devices.ts
dataSource = new MatTableDataSource(DEVICES);
displayedColumns: string[] = ['position','name','serialNo','actions'];
private subs: Subscription[] = [];
localData: any[] = [];
constructor(private socketService: SocketService) {
}
ngOnInit() {
console.log('onInit');
this.subs.push(
this.socketService.getinitialData().subscribe((data: ServerResponse) => {
this.localData = data.prods;
console.log('Subbed2');
})
);
this.subs.push(
this.socketService.getUpdatedData().subscribe((data: ServerResponse) => {
this.localData = data.prods;
console.log('Sub2');
})
);
}
ngOnDestroy() {
this.subs.forEach(s => s.unsubscribe());
}
}
interface ServerResponse {
prods: any[];
type?: string;
}
app-routing.module.ts
// Creating routes to components that can be linked to in html files
const routes: Routes = [{
path: '',component: DefaultComponent,children: [{path: '',component: DashboardComponent},{path: 'device1',component: Device1Component},]
},];
@NgModule({
imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }
我使用侧边栏来处理路由
<a mat-list-item routerLinkActive="list-item-active" routerLink="/">Dashboard </a>
<a mat-list-item routerLinkActive="list-item-active" routerLink="/device1">Device1</a>
<a mat-list-item >Notifications </a>
解决方法
这可能是服务的错误,而不是组件的错误。
在第一次获取初始数据后尝试记录它:
class Device1Component {
ngOnInit() {
this.socketService.getInitialData().subscribe((data: ServerResponse) => {
this.localData = data.prods;
console.log('true initial');
this.socketService.getInitialData().subscribe((data: ServerResponse) => {
console.log('test initial');
});
});
}
}
在我们知道这是什么死后,我们可以跟进
,因此,在这种情况下,问题在于我的服务器端代码仅在初始连接时发出数据表。
我通过创建一个在创建组件时触发的函数来解决:
ngOnInit() {
this.socketService.emitSomething();
在我的套接字服务中:
emitSomething(){
this.socket.emit('something');
}
服务器收到此消息后发送数据:
socket.on("something",arg => {
console.log("eSomething was emitted")
io.sockets.emit('initial',{prods: [...data]});
});
这可能更像是一个黑客而不是一个有效的解决方案。很乱,但我会在了解更多信息后将其整理好。
另外,我想感谢所有评论的人,主要是因为即使他们不是一个确切的答案,每个人都帮助我调试了路由原因并提出了这个“黑客”。