Question

我在Angular 5中有4个组件。在第一部分中，我有3个单选按钮，如果我们单击单选按钮，则每个元素都将通过（click）=“”进入其他组件，但是单选按钮没有被选中，那么如果我单击单选按钮，如何一次导航到其他组件，单选按钮将被选中？

bash -c

.ts文件：

-c   If the -c option is present, then  commands  are  read  from  the  first  non-option  argument  com‐
     mand_string.   If there are arguments after the command_string, the first argument is assigned to $0
     and any remaining arguments are assigned to the positional parameters.  The assignment  to  $0  sets
     the name of the shell, which is used in warning and error messages.

Answer 1

从您的代码中我可以理解的所有内容：

HTML：

<input type="radio" name="stock" (click)="doSomething()" >

TS：

    doSomething() {
            setInterval(() => {
                this.router.navigateByUrl('url');
            }, 100);
        }

理想情况下，如果仅更改页面一部分的视图而单选按钮位于另一部分，则单选按钮上的选择应保留。这意味着您的路由器插座应与单选按钮组件分开放置。

Answer 2

所以我认为您应该重新配置路由。
并在单选按钮下放置一个“路由器出口”标签
然后，让路由器插座根据您单击的单选按钮来决定要呈现的组件。
在官方页面Router outlet

中寻找我

<div class="form-group row form-bg">
   <label class="control-label col-sm-2">Item Type </label>
     <div class="col-sm">
       <label class="radio-inline" style="color: #fd6428; font-weight: bold;">
        <input type="radio"  name="stock" (click)="stock()"> Stock 
       </label>
       ......
     </div>
 </div>


<router-outlet></router-outlet>

我假设您的html将是MasterPageComponent的模板您的路线：

{
 path: 'itemmastersmodule',
 children: [
  {
    path: 'itemmasterpages',
    component:  MasterPageComponent,
    children: [
      {
        path: 'app-item-master-stock',
        component: ItemMasterStockPageComponent,
      },
      {
        path: 'app-item-master-non-stock',
        component: ItemMasterNonStockPageComponent,
      },
      ....
    ],
  },
 ],
},

尽管不必创建4个单独的组件，但您可以使用具有不同列表类型的相同组件，并在路由器中像这样配置它

{
 path: 'itemmastersmodule',
 children: [
  {
    path: 'itemmasterpages/:type',
    component:  MasterPageComponent,
  },
 ],
},

，您的组件可能是例如ItemMasterPageComponent
您可以寻找更多HERE

this.route.params.subscribe((params : any) => {
  this.type = params.type;
  this.itemMasterService.getItemsByType(this.type);
});

如何为Angular -5中的一个输入单选按钮添加2（onclick）=“”

2 个答案: