Angular 5 - Скрыть компонент от другого компонента - PullRequest
Новая
       10

Angular 5 - Скрыть компонент от другого компонента

0 голосов
/ 07 апреля 2020

У меня есть главная панель инструментов, которая загружает несколько разных компонентов. Я создал новый компонент, в котором я хочу скрыть или показать из этого компонента все остальное в зависимости от конкретной ситуации.

Возможно ли это?

Каждый компонент имеет свой собственный шаблон HTML, контроллер, модель представления и т. Д. c.

My HTML: 

<ng-container>
    <ion-grid>
        <ion-row align-items-center class="no-vertical-padding">
            <div class="text-flex mediumFont">
                <ion-item class="bigFont text-flex">{{ noActiveServiceDashboardCmsModel.literalTitle }} <span class="colorSecondary">{{ noActiveServiceDashboardViewModel.name }}</span></ion-item>
                <ion-item class="font-bold text-flex">{{ noActiveServiceDashboardCmsModel.literalSubtitle }}</ion-item>
                <ion-item class="font-book text-flex" text-wrap>{{ noActiveServiceDashboardCmsModel.literalDescription }}</ion-item>
                <ion-item text-center><img class="truckLogo" [src]="noActiveServiceDashboardCmsModel.truckLogo.url"/></ion-item>
                <ion-item text-center><button ion-button class="goToOrder font-book smallFont" color="success" (click)="goToLink()">
                    {{ noActiveServiceDashboardCmsModel.literalButton }}
                </button></ion-item>
            </div>        
        </ion-row>
    </ion-grid>
</ng-container>

Контроллер: 

import { Component, OnInit, Injector } from '@angular/core';
import { LogsProvider } from '@providers/logs/logs.provider';
import { DinamicComponentLoaderProvider } from '@providers/cms/modules/dinamic-component-loader.provider';
import { NoActiveServiceDashboardCmsModel } from './models/no-active-service-dashboard.cms-model';
import { CustomerPersonalData } from '@providers/apis/customer-view/app-models/customer-personal-data';
import { CustomerViewProvider } from '@providers/apis/customer-view/providers/customer-view.provider';
import { LoginProvider } from '@providers/login/login.provider';
import { NoActiveServiceDashboardViewModel } from '@components/no-active-service-dashboard/models/no-active-service-dashboard.view-model';
import { LinkNavigationProvider } from '@providers/navigation/link-navigation.provider';
import { NavController } from 'ionic-angular'; 

@Component({
  selector: 'no-active-service-dashboard',
  templateUrl: 'no-active-service-dashboard.html'
})
export class NoActiveServiceDashboardComponent implements OnInit {

  logTag = 'NoActiveServiceDashboardComponent';
  noActiveServiceDashboardCmsModel: NoActiveServiceDashboardCmsModel = new NoActiveServiceDashboardCmsModel();
  noActiveServiceDashboardViewModel: NoActiveServiceDashboardViewModel = new NoActiveServiceDashboardViewModel();

  constructor(
    private logsProvider: LogsProvider,
    private injector: Injector,
    private customerViewProvider: CustomerViewProvider,
    private loginProvider: LoginProvider,
    private linkNavigationProvider: LinkNavigationProvider,
    private navCtrl: NavController,
    ) {
      this.logsProvider.componentsLifeCycleLog(this.logTag, 'Hello');
      this.noActiveServiceDashboardCmsModel = new NoActiveServiceDashboardCmsModel();
      this.noActiveServiceDashboardCmsModel.deserializeCmsData(this.injector.get(DinamicComponentLoaderProvider.cmsModuleKey));
  }

  ngOnInit() {
    this.logsProvider.componentsLifeCycleLog(this.logTag, 'ngOnInit');
    this.getPersonalDataFromCustomerView();
  }

  private getPersonalDataFromCustomerView() {

    this.logsProvider.debugLog(this.logTag, 'getPersonalDataFromCustomerView');

    this.customerViewProvider.getData(this.loginProvider.getLoginDataModel())
      .then(
        () => {

          this.logsProvider.debugLog(this.logTag, 'getPersonalDataFromCustomerView OK');

          const customerPersonalData: CustomerPersonalData = this.customerViewProvider
          .getCustomerPersonalData(this.loginProvider.getLoginType());

          this.getCustomerName(customerPersonalData);

        }, () => {

          this.logsProvider.errorLog(this.logTag, 'getPersonalDataFromCustomerView KO');
        });
  }

  private getCustomerName(customerPersonalData: CustomerPersonalData) {

    this.noActiveServiceDashboardViewModel.name = customerPersonalData.name;

  }

  goToLink() {

    this.linkNavigationProvider.navigateToLinkUrl(this.noActiveServiceDashboardCmsModel.cmsLinkOrders, this.navCtrl)
      .then(
        () => {
          this.logsProvider.debugLog(this.logTag, 'Navigate to orders Ok');
        },
        () => {
          this.logsProvider.debugLog(this.logTag, 'Navigate to orders Ko');
        }
      );
  }

}
...