angular - 如何使用路由器 socket 加载 Angular 组件

标签 angular typescript components router

Product component如果 Product 2 Component,页面不会更新在 Product 1 Component 之后点击.我要点击Hello Component然后才Product 2 Component确保Product component页面更新为 ID 号。

换句话说,Product组件仅在我单击时更新:

  • Product 1 Component
  • Hello Component
  • Product 2 Component

  • enter image description here

    如何解决问题?这是 Stackblitz 项目:

    https://stackblitz.com/edit/angular-ivy-insynj?file=src%2Fproduct%2Fproduct.component.ts

    最佳答案

    Demo通常它正在工作。您缺少的是您无法在同一组件中重定向。这就是为什么你想错了。为每次点击提供功能和

    <nav> 
      <a  class="btn btn-tab" (click)="onChange('/hello')">Hello Component</a>  
      <a  class="btn btn-tab"(click)="onChange('/product/1')">Product 1 Component</a>
      <a  class="btn btn-tab"(click)="onChange('/product/2')">Product 2 Component</a>
    </nav>
    <router-outlet></router-outlet>
    

    在 component.ts 中使用它
    constructor(private _router:Router){}
    onChange(param){
      this._router.routeReuseStrategy.shouldReuseRoute = () => false;
      this._router.onSameUrlNavigation = 'reload';
      this._router.navigate([param]);
    }
    

    关于angular - 如何使用路由器 socket 加载 Angular 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62366039/

    相关文章:

    angular - 模块 'MdAutocompleteModule' 声明了意外的模块 'AppModule'。请添加@Pipe/@Directive/@Component注解

    angular - 使用 createSpyObj 对可观察量进行单元测试

    javascript - compilerOptions.target 在 tsconfig.json 中指定了什么?

    javascript - selectedIndex 不适用于 mat-tab-nav-bar Angular Material 选项卡

    javascript - ReactJS 改变子类的另一个类的状态

    javascript - 未生成来自 tailwind.config.js 的自定义顺风颜色

    angular - 如何使 'mat-select' 只读?

    javascript - 如何在 TypeScript 中用文本框替换单词?

    javascript - 将通用组件或组件作为属性进行 react

    javascript - 如何首先在应用程序模板中加载 Ember 组件?