Есть ли способ переключения между вкладками угловых материалов на основе отправки формы из содержимого этих вкладок? - PullRequest
Новая
       28

Есть ли способ переключения между вкладками угловых материалов на основе отправки формы из содержимого этих вкладок?

1 голос
/ 03 мая 2019

Я работаю над угловым веб-приложением. Мне требуется контролировать мои угловые вкладки на основе действий, выполняемых в содержимом этих вкладок. Например, у меня есть следующие вкладки: Информация о товаре, Вариации, Ценообразование, Инвентарь и т. Д. и эти вкладки содержат формы, загруженные угловыми компонентами. Я хочу автоматически переключаться на вкладку «Вариации», когда форма информации об элементе отправляется успешно. Кроме того, пользователь не должен иметь возможность перейти на вкладку вариантов перед сохранением информации об элементе. 

<mat-tab-group class=" navbar-default panel-piluku  nav nav-justified nav-wizard nav-progression" > 
  <mat-tab class="outbound_link" role="button" title="Item Info" label="Item Info">
    <add-product-information></add-product-information>
  </mat-tab>
  <mat-tab class="outbound_link" role="button" title="Variations" label="Variations">
    <add-product-variation></add-product-variation>
  </mat-tab>
  <mat-tab class="outbound_link" role="button" title="Pricing" label="Pricing">
      <add-product-pricing></add-product-pricing>
  </mat-tab>
  <mat-tab class="outbound_link" role="button" title="Inventory" label="Inventory">
      <add-product-stock></add-product-stock>
  </mat-tab>
  <mat-tab class="outbound_link" role="button" title="Images" label="Images">
    <add-product-images></add-product-images>
  </mat-tab>
  <mat-tab class="outbound_link" role="button" title="Locations" label="Locations">
    <add-product-locations></add-product-locations>
  </mat-tab>
</mat-tab-group>

constructor(private route: ActivatedRoute, private productsService: ProductsService, private router: Router, public dialog: MatDialog, private suppliersService: SuppliersService) { }
  submitProduct = function(){
    this.product["sku"] = this.sku;
    this.product["alternate_sku"] = this.alternate_sku;
    this.product["product_name"] = this.product_name;
    this.product["product_description"] = this.product_description;
    this.product["category"] = this.category_id;
    this.product["price_per_unit"] = this.price_per_unit;
    this.product["reorder_level"] = this.reorder_level;
    this.product["discontinued"] = this.discontinued;
    this.product["cost"] = this.cost;
    this.product["default_price"] = this.default_price;
    this.product["best_price"] = this.best_price;
    this.product["medium_price"] = this.medium_price;
    this.product["brand"] = this.brand;
    this.product["upc"] = this.upc;
    this.productsService.addProduct(this.product).subscribe((data)=>{
      ````Here the tab should switch```````
    });

<form action="submitProduct()" id="item_form" class="form-horizontal" method="post" accept-charset="utf-8">

  <input type="hidden" name="ecommerce_product_id" value="" />
...
...
...

      <div class="form-actions">
        <input type="submit" name="submitf" value="Save" id="submitf"
          (click)="submitProduct()" class="submit_button floating-button btn btn-lg btn-primary" />
      </div>
    </div>
  </div>
</form>

1 Ответ

0 голосов
/ 03 мая 2019

Можно управлять выбранной вкладкой, используя вход selectIndex для mat-tab-group.Чтобы изменить tabSelected, установите для него нужный вам индекс вкладки, а вкладка изменится на установленный индекс.

Чтобы сделать это, я бы просто определил службу и использовал темы поведения.Определение моего сервиса:

my-tab.service.ts: 

@Injectable()

export class MyTabService{
 tabSubject : BehaviorSubject<number> = new BehaviorSubject<number>(0);

 constructor(){}

 setTabSelected(tabIndex : number){
  this.tabSubject.next(tabIndex);
 } 

 getTabSelected() {
  this.tabSubject.asObservable();
 }
}

Теперь подпишитесь на getTabSelected() в компоненте вкладок, и вы получите tabIndex в ответе на подписку.

Учитывая, что компонент вкладок имеет значение my-tab.component.ts, 

@Component({...})
export class MyTabComponent {
 selectdIndex : number = 0;
 constructor(private _myTabService : MyTabService){}

 ngOnInit(){

 this.-myTabService.getTabSelected().subscribe((tabIndex : number) =>{
  this.selectedIndex = tabIndex;
 })

...
 }
...
}

Используйте selectedIndex в вашем шаблоне: 

<mat-tab-group class=" navbar-default panel-piluku  nav nav-justified nav-wizard nav-progression" [selectedIndex]='selectedIndex'> 
  <mat-tab class="outbound_link" role="button" title="Item Info" label="Item Info">
    <add-product-information></add-product-information>
  </mat-tab>
  <mat-tab class="outbound_link" role="button" title="Variations" label="Variations">
    <add-product-variation></add-product-variation>
  </mat-tab>
  <mat-tab class="outbound_link" role="button" title="Pricing" label="Pricing">
      <add-product-pricing></add-product-pricing>
  </mat-tab>
  <mat-tab class="outbound_link" role="button" title="Inventory" label="Inventory">
      <add-product-stock></add-product-stock>
  </mat-tab>
  <mat-tab class="outbound_link" role="button" title="Images" label="Images">
    <add-product-images></add-product-images>
  </mat-tab>
  <mat-tab class="outbound_link" role="button" title="Locations" label="Locations">
    <add-product-locations></add-product-locations>
  </mat-tab>
</mat-tab-group>

Для получения дополнительной информации о входах и событиях в группе вкладок матов см.: Коврик для вкладыша

...