angular-routing 相关问题

我有一个组件监视列表组件，当单击事件发生时，该组件应该调用另一个组件 search-home-component 中的方法。这是我的监视列表组件：观看列表... 我有一个组件监视列表组件，当单击事件发生时，该组件应该从另一个组件 search-home-component 调用方法。这是我的监视列表组件： <p>watchlist works!</p> <div class="alert alert-light alert-dismissible" *ngFor="let item of watchlistList" (click)="searchClickedTicker(item.tickerSymbol)" style="cursor: pointer;"> <button class="btn-close" type="button" data-bs-dismiss="alert" (click)="removeFromWatchlist(item.tickerSymbol); $event.stopPropagation();"></button> <p>watchlist item 1: {{item.tickerSymbol}} and {{item.companyName}}</p> </div> import { Component } from '@angular/core'; import { OnInit } from '@angular/core'; import { AppServiceService } from '../app-service.service'; import { SearchService } from '../search.service'; import { Subscription } from 'rxjs'; @Component({ selector: 'app-watchlist', templateUrl: './watchlist.component.html', styleUrl: './watchlist.component.css' }) export class WatchlistComponent implements OnInit { private tickerClickedSubscription: Subscription | undefined; constructor(private service: AppServiceService, public searchService: SearchService){} public watchlistList: any[] = []; ngOnInit(){ console.log('Watchlist Iniitalised'); // some code here } searchClickedTicker(ticker: string){ console.log("div clicked", ticker); this.searchService.sendTickerClicked(ticker); } } 这是我的搜索主页组件： import { Component, OnChanges, ViewChild, input, OnDestroy, OnInit } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; import { AppServiceService } from '../app-service.service'; import { SearchResultsComponent } from './search-results/search-results.component'; import { SearchService } from '../search.service'; import { FormBuilder, FormControl, FormGroup} from '@angular/forms'; import {MatFormFieldModule} from '@angular/material/form-field'; import { Subscription } from 'rxjs'; import { EventEmitter,Output } from '@angular/core'; @Component({ selector: 'app-search-home', templateUrl: './search-home.component.html', styleUrls: ['./search-home.component.css'] }) export class SearchHomeComponent implements OnDestroy, OnInit{ private tickerClickedSubscription: Subscription | undefined; constructor(private router: Router, private route: ActivatedRoute, private service: AppServiceService, public searchService: SearchService, private fb: FormBuilder) { } ngOnInit(){ this.tickerClickedSubscription = this.searchService.tickerClicked$.subscribe(ticker => { this.searchTicker(ticker); }); } searchTicker(searchInputValue: string) { //search ticker implementation this.autoUpdateInterval = setInterval(() => { this.updateResults(searchInputValue); }, 15000); } updateResults(inputValue: string){ //more code this.router.navigate(['/search', inputValue]); } //some other code ngOnDestroy(): void { if (this.tickerClickedSubscription) { //this.tickerClickedSubscription.unsubscribe(); console.log('unsubscribed from tickerClickedSubscription'); } } } 我使用了一项服务，允许一个组件调用另一个组件的方法： import { Injectable } from '@angular/core'; import { Observable,Subject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class SearchService { private tickerClickedSource = new Subject<string>(); tickerClicked$ = this.tickerClickedSource.asObservable(); constructor() {} sendTickerClicked(ticker: string) { console.log('sendtickerclicked called') this.tickerClickedSource.next(ticker); } } 由于 search-home 组件中的 searchTicker 方法具有一些自动更新功能（以及导航到另一条路线），因此即使我位于监视列表组件内，我也会导航到该路线。我只想在主组件内部时看到自动更新（或者至少我不想在监视列表组件内部时自动移动到另一条路线）。我尝试取消订阅主页组件中 tickerClickedSubscription 上的 ngDestroy，但它实际上会禁用整个服务，并且当 (click)="searchClickedTicker(item.tickerSymbol) 发生时什么也不会发生。我还尝试使用 authGuard 来阻止导航到其他路线，但是我无法弄清楚。我将不胜感激任何帮助！您可以在 stackblitz 上创建示例吗？也可能发生这种情况是因为您在 clearInterval(this.autoUpdateInterval) 中缺少 ngOnDestroy。 https://developer.mozilla.org/en-US/docs/Web/API/clearInterval

node.js angular angular-routing angular-services auth-guard

回答 1 投票 0

如何从 JSON 值添加动态路由保护？

我正在尝试在我的角度应用程序中添加路线防护。我正在从具有以下结构的 JSON 动态构建路由 { "path": "软件升级", ...

javascript angular angular-routing

回答 1 投票 0

Angular redirectTo：将数据传递到重定向路由

有没有办法仅在从 oldpath 重定向时将“数据”传递到 home 组件，而不是从 '' 重定向？常量路线：路线= [ {路径：''，redirectTo：'家'}， {路径：'旧...

angular angular-routing redirecttoroute

回答 1 投票 0

Angular 动态路由出口不起作用

我有一个简单的路线配置 const appRoutes: 路线[] = [ { 路径：'路线'，出口：'出口'，组件：测试组件， } ]; 我想做的是每次创建路由器插座对接...