Question

我正在开发一个具有组件-'A'的应用程序，该组件可以动态创建表单，然后在另一个组件-'B'中使用此组件来创建表单。现在，我导航至参数为“ test”的“ B”组件，并导航至参数为“ test / 1”的相同组件“ B”。

问题：当我单击按钮导航到具有不同参数的'B'组件时，尽管URL更改了，但单击一次它不起作用。我必须单击两次。

此外，我正在使用NGXS在组件中设置数据，因此我不需要参数值即可呈现组件。这些值正在填充。

我还注意到，对于不带参数路由的向导组件（工作正常），ngOnInit被调用两次，但是当使用参数执行路由时，它仅被调用一次。

路由模块：

const routes: Routes = [
  {
      path: '',
      redirectTo: 'home',
      pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'wizard',
    children: [
      {
        path: '',
        component: WizardComponent,
        pathMatch: 'full'
      },
      {
        path: ':id',
        component: WizardComponent,
      }
    ],
    runGuardsAndResolvers: 'always'
  },
];

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(routes, {
      onSameUrlNavigation: 'reload'
    })
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }
export const routingComponents = []

要路由到所需网址的代码：

editQuestion(question: Question){
    this.boolEditBtnClick = true;
    this._store.dispatch(new SetSelectedItem(item));
    this._route.navigate(['wizard', item.Id]);
  }

向导组件：

@Component({
  selector: 'app-test-wizard',
  templateUrl: './test-wizard.component.html',
  styleUrls: ['./test-wizard.component.css']
})
export class WizardComponent implements OnInit {

  constructor(private _testService: NewTetstService, private _fb: FormBuilder, private _route: Router) { 
    this._route.routeReuseStrategy.shouldReuseRoute = () => false;
  }

  formName: string;
  regConfig: ItemControlBase[];

  @Select(ItemState.getSelectedItem) selectedItem: Observable<Item>;
  item:Item = {};

  ngOnInit(): void {
    this.stage = this._testService.getStageInfo();
    this.regConfig = this._testService.getMapping(this.stage['Mapping']);
    this.formName = this.stages[0]['Id'].toLowerCase();
    this.newForm = this.createFormGroup(this.formName);
      this.selectedItem.subscribe(item => {
        if (item) {
          this.item = item;
        }
      })
  }

}

Answer 1

它解决了我自己。在我的末端这是一个愚蠢的错误。问题：的位置错误。我将其放置在app.html中和home组件（由标题和侧栏组成）下方，如下所示： app.html ：

<app-home></app-home>
<router-outlet></router-outlet>

解决方案：

<app-home><router-outlet></router-outlet></app-home>

仅双击即可路由到具有不同参数的相同组件

1 个答案: