修改后刷新頁面 URL

Question

這似乎是一件基本的事情，但我正在努力。 我有一個視圖“/plugin/{pluginId}”，當我在地址欄中更改 pluginId 后按回車鍵時，它不會更新。 我必須在瀏覽器中手動刷新頁面。 我該怎么做才能自動刷新？

<div>
    <div>
        <a mat-raised-button href="/plugin">
            <span>&#8592;</span>
        </a>
        <a mat-raised-button href="" style="float: right">Send message</a>
    </div>
    <div>
        <ul>       
            <li *ngFor="let message of (messages$ | async)">
                {{message.message}}
            <br><br>
        </li></ul>
    </div>
</div>

export class Foo implements OnInit {
  pluginMessagesState$: Observable< fromPluginMessages.State >;
  pluginId = '';
  messages$: Observable< Message[] >;

  constructor(private route: ActivatedRoute,
              private store: Store< fromRoot.State >,

  ) {
    if ( this.route.snapshot.params[ 'pluginId' ] ) {
      this.pluginId = this.route.snapshot.params[ 'pluginId' ];
    }

    this.pluginMessagesState$ = this.store.select( fromRoot.getPluginMessagesState );
    this.messages$ = this.pluginMessagesState$.pipe(
      map( state => state.pluginMessages.get( this.pluginId )?.list || [] )
    );
  }

  ngOnInit(): void {
  }

}

Answer 1

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user-detail',
  templateUrl: 'user-detail.component.html'
})
export class UserDetailComponent implements OnInit {
    constructor(private activeRoute: ActivatedRoute) {
    }

    ngOnInit() {
        const queryParams = this.activeRoute.snapshot.queryParams
        const routeParams = this.activeRoute.snapshot.params;

        // do something with the parameters
        this.loadUserDetail(routeParams.id);
    }
}

或者

ngOnInit() {
    this.activeRoute.queryParams.subscribe(queryParams => {
        // do something with the query params
    });
    this.activeRoute.params.subscribe(routeParams => {
        this.loadUserDetail(routeParams.id);
    });
}

Answer 2

你的路由器文件是這樣的嗎？

{path: 'plugin/:id', component: UserDetailComponent}

如果是這樣，訂閱 ActivatedRoute（將其注入構造函數參數），如下所示：

public pluginId: number;
constructor(private route: ActivatedRoute) {
}

並通過訂閱 route.params 來訪問參數：

ngOnInit() {
  this.routeSub = this.route.params.subscribe(params => {
      // update the pluginId accordingly
      this.pluginId = params['id'];
  });
}