将三个Angular组件绑定在一个包括功能

Question

我在那里待了两天......

我有三个组件：使用打字稿的Angular 1.5项目中的项目，顾问和简报。

我创建了一个管理组件来显示其他三个人的html，我想使用管理组件中这三个组件的所有功能，希望我很清楚，看看我的代码如下：

我还有一个app.route.ts文件（使用angular ui-router）

如果有人知道如何将每个方法聚合到我的admin.component，例如反映在三个组件上的刷新方法（后端是一些Laravel 5，但我认为我不需要修改..）

提前致谢

project.list.component：

 import * as angular from "angular";
 import {SharedService} from "../../services/shared.service";
 import {IProject} from "../../models/project";
 import {ISector} from "../../models/sector";
 import {ITechnology} from "../../models/technology";
 import {IPromise} from "angular";
 import {ProjectService} from "../../services/project.service";
 import {IPaginationResponse} from 
 "../../models/pagination/pagination-response";
 import {IStateService} from 'angular-ui-router';
 import {AuthService} from "../../services/auth.service";
 import {SectorService} from "../../services/sector.service";

 @Component({
     templateUrl: 
 '/app/src/components/project/project.list.component.html',
     bindings: {
         projectPagination: '<',
        technologies: '<',
        sectors: '<'
   }
})

export class ProjectListComponent {
     public selected: any = [];
     public search: any = {};
    public promise: IPromise<void>;
    public pagination: any = {
        order: 'start_date',
        limit: 25,
        page: 1
    };

    // Bindings
   public projects: IProject[];
   public projectPagination: IPaginationResponse<IProject>;
   public technologies: ITechnology[];
   public sectors: ISector[];
   public currentLocale: string;
   public allowedRoles: string[];

constructor(private $scope: angular.IScope,
            private $mdDialog: angular.material.IDialogService,
            private dateFilter: angular.IFilterDate,
            private Shared: SharedService,
            private Auth: AuthService,
            private Project: ProjectService,
            private Sector: SectorService,
            private $state: IStateService) {
    'ngInject';
    this.Shared.title = 'TURNKEY_PROJECTS';
    this.currentLocale = localStorage.getItem('locale');
    this.allowedRoles = ['commercial', 'admin'];
}

private updateList(paginationResponse: IPaginationResponse<IProject>) 
{
    this.projects = paginationResponse.data;
    this.pagination.total = paginationResponse.meta.pagination.total;
    this.pagination.page = 
 paginationResponse.meta.pagination.current_page;
}

isUserAllowed() {
    return this.Auth.isUserAllowed(this.allowedRoles);
}

refresh() {
    let orderBy = this.pagination.order.startsWith('-')
        ? this.pagination.order.substr(1, this.pagination.order.length)
        : this.pagination.order;
    let orderDirection = this.pagination.order.startsWith('-')
        ? 'DESC'
        : 'ASC';

    if (this.search.end_date)
        this.search.end_date = this.dateFilter(this.search.end_date, 'yyyy-MM-dd');

    this.promise = this.Project.getAll(this.search, this.pagination.page, this.pagination.limit, orderBy, orderDirection).then(response => {
        this.promise = this.Sector.getAll().then(response2 => {
            this.sectors = response2.data;
            this.updateList(response.data);
        });
    });
};

checkIfHasProjectFile(project: IProject) {
    return (project && project.projectFiles && project.projectFiles.length > 0 && project.projectFiles.findIndex(f => f.type === 'project_file' && f.locale === this.currentLocale) >= 0)
}

add() {
    let dialogScope = angular.extend(this.$scope.$new(true), {
        project: null,
        technologies: this.technologies,
        sectors: this.sectors
    });

    this.$mdDialog.show({
        template: '<project-form project="project" technologies="technologies" sectors="sectors"></project-form>',
        clickOutsideToClose: false,
        scope: dialogScope
    }).then(() => this.refresh());
}

edit($event: any, project: IProject) {
    $event.stopPropagation();
    let dialogScope = angular.extend(this.$scope.$new(true), {
        project: project,
        technologies: this.technologies,
        sectors: this.sectors
    });

    this.$mdDialog.show({
        template: '<project-form project="project" technologies="technologies" sectors="sectors"></project-form>',
        clickOutsideToClose: false,
        scope: dialogScope
    }).then(() => this.refresh());
}

remove($event: any, project: IProject) {
    $event.stopPropagation();
    let alert = this.$mdDialog.confirm()
        .clickOutsideToClose(true)
        .title('Confirm')
        .textContent('Are you sure ?')
        .ok('Yes')
        .cancel('Cancel');

    this.$mdDialog.show(alert).then(() => {
        this.Project.delete(project.id).then(() => this.refresh());
    });
}

viewProject(project_id) {
    this.$state.go('project', {
        project_id: project_id,
        technology: this.search.technology,
        sector: this.search.sector
    });
}

previewProjectFile($event, project: IProject) {
    $event.stopPropagation();
    this.$state.go('project-preview', {
       project_id:  project.id
    });
}

$onInit() {
    this.updateList(this.projectPagination);

    if (this.$state.params.technology)
        this.search.technology = this.$state.params.technology;

    if (this.$state.params.sector)
        this.search.sector = this.$state.params.sector;
}

}

consultants.list.components：

 import {Component} from '../../decorators/component';
 import * as angular from 'angular';
 import material = angular.material;
 import {SharedService} from "../../services/shared.service";
 import {IPromise} from "angular";
 import {IPaginationResponse} from "../../models/pagination/pagination-response";
 import {IConsultant} from "../../models/consultant";
 import {ConsultantService}  from "../../services/consultant.service";
import {ITechnology} from "../../models/technology";
import {IBusiness} from "../../models/business";
import {IStateService} from 'angular-ui-router';
import {TrackingService} from "../../services/tracking.service";
import {AuthService} from "../../services/auth.service";
import {BusinessService} from "../../services/business.service";

@Component({
     templateUrl: 
 '/app/src/components/consultant/consultant.list.component.html',
    bindings: {
    consultantPagination: '<',
    businesses: '<',
    technologies: '<'
   }
})
 export class ConsultantListComponent {
    public search: any = { searchInFile: 0 };
    public promise: IPromise<void>;
    public pagination: any = {
    order: 'trigram',
    limit: 25,
    page: 1
};

    public businesses: IBusiness[];
    public technologies: ITechnology[];
    public consultants: IConsultant[];
    public consultantPagination: IPaginationResponse<IConsultant>;
    public currentLocale: string;
     public allowedRoles: string[];

constructor(private $scope: angular.IScope,

            private $mdDialog: material.IDialogService,
            private Shared: SharedService,
            private Auth: AuthService,
            private Consultant: ConsultantService,
            private $state: IStateService,
            private Tracking: TrackingService,
            private Business: BusinessService) {
    'ngInject';
    this.Shared.title = 'CONSULTANTS';
    this.allowedRoles = ['commercial', 'admin'];
    this.currentLocale = localStorage.getItem('locale');
}

private updateList(paginationResponse: 
 IPaginationResponse<IConsultant>) {
    this.consultants = paginationResponse.data;
    this.pagination.total = paginationResponse.meta.pagination.total;
    this.pagination.page = 
 paginationResponse.meta.pagination.current_page;
    }

     isUserAllowed() {
         return this.Auth.isUserAllowed(this.allowedRoles);
    }

    checkIfHasConsultantFile(consultant: IConsultant) {
        return (consultant && consultant.consultantFile && 
 consultant.consultantFile.length > 0 && 
 consultant.consultantFile.findIndex(f => f.locale === 
 this.currentLocale) >= 0)
    }

  refresh() {
       let orderBy = this.pagination.order.startsWith('-') ?
           this.pagination.order.substr(1, 
this.pagination.order.length) :
        this.pagination.order;

    let orderDirection = this.pagination.order.startsWith('-') ?
        'DESC' :
        'ASC';

    this.promise = this.Consultant.getAll(this.search, 
 this.pagination.page, this.pagination.limit, orderBy, 
  orderDirection).then(response => {
        this.promise = this.Business.getAll().then(response2 => {
            this.businesses = response2.data;
            this.updateList(response.data);
        });
        });
    }

    add() {
        let dialogScope = angular.extend(this.$scope.$new(true), {
            consultant: null,
        businesses: this.businesses,
        technologies: this.technologies
    });

    this.$mdDialog.show({
        template: '<consultant-form consultant="consultant" 
      businesses="businesses" technologies="technologies">
 </consultant-form>',
        clickOutsideToClose: false,
        scope: dialogScope
         }).then(() => this.refresh());
    }

    edit(consultant: IConsultant) {
       let dialogScope = angular.extend(this.$scope.$new(true), {
        consultant: angular.copy(consultant),
        businesses: this.businesses,
        technologies: this.technologies
      });

       this.$mdDialog.show({
        template: '<consultant-form consultant="consultant" businesses="businesses" technologies="technologies"></consultant-form>',
        clickOutsideToClose: false,
        scope: dialogScope
        }).then(() => this.refresh());
    }

    remove(consultant: IConsultant) {
    let alert = this.$mdDialog.confirm()
        .clickOutsideToClose(true)
        .title('Confirm')
        .textContent('Are you sure ?')
        .ok('Yes')
        .cancel('Cancel');

        this.$mdDialog.show(alert).then(() => {
        this.Consultant.delete(consultant.id).then(() => 
 this.refresh());
    });
    }

    previewConsultantFile(consultant: IConsultant) {
        this.$state.go('consultant-preview', {
            consultant_id:  consultant.id
       });
   }

    $onInit() {
        this.updateList(this.consultantPagination);

      if (this.$state.params.token) {
        this.Tracking.updateReadAt(this.$state.params.token);
       }

    if (this.$state.params.trigram) {
        this.search.trigram = this.$state.params.trigram;
     }
   }
 }

newsletter.list.component：

 import {Component} from '../../decorators/component';
 import * as angular from 'angular';
 import material = angular.material;
 import {SharedService} from "../../services/shared.service";
 import {INewsletter} from "../../models/newsletter";
 import {IPromise} from "angular";
 import {NewsletterService} from "../../services/newsletter.service";
  import {IPaginationResponse} from "../../models/pagination/pagination-response";
  import {IStateService} from 'angular-ui-router';
 import {AuthService} from "../../services/auth.service";

 @Component({
    templateUrl: 
 '/app/src/components/newsletter/newsletter.list.component.html',
bindings: {
    newsletterPagination: '<',
    newsletterReleaseDates: '<'
    }
  })

  export class NewsletterListComponent {
     public search: any = {};
     public promise: IPromise<void>;
     public pagination: any = {
    order: '-release_date',
    limit: 25,
    page: 1
  };

    public newsletterReleaseDates: string[];
    public newsletters: INewsletter[];
    public newsletterPagination: IPaginationResponse<INewsletter>;
    public allowedRoles: string[];

constructor(private $scope: angular.IScope,
            private $mdDialog: material.IDialogService,
            private Shared: SharedService,
            private Auth: AuthService,
            private Newsletter: NewsletterService,
            private $state: IStateService) {
    'ngInject';
    this.Shared.title = 'NEWSLETTERS';
    this.allowedRoles = ['commercial', 'admin'];
}

private updateList(paginationResponse: 
  IPaginationResponse<INewsletter>) {
    this.newsletters = paginationResponse.data;
    this.pagination.total = paginationResponse.meta.pagination.total;
    this.pagination.page = 
  paginationResponse.meta.pagination.current_page;
     }

    isUserAllowed() {
       return this.Auth.isUserAllowed(this.allowedRoles);
  }

refresh() {
    let orderBy = this.pagination.order.startsWith('-') ? 
  this.pagination.order.substr(1, this.pagination.order.length) :  
 this.pagination.order;
    let orderDirection = this.pagination.order.startsWith('-') ? 
 'DESC' : 'ASC';

    this.promise = this.Newsletter.getAll(this.search, 
 this.pagination.page, this.pagination.limit, orderBy, 
 orderDirection).then(response => {
        this.updateList(response.data);
        });
    }

    add() {
        let dialogScope = angular.extend(this.$scope.$new(true), {
        newsletter: null,
       });

    this.$mdDialog.show({
        template: '<newsletter-form newsletter="newsletter">
 </newsletter-form>',
        clickOutsideToClose: false,
        scope: dialogScope
    }).then(() => this.refresh());
    }

  edit(newsletter: INewsletter) {
    let dialogScope = angular.extend(this.$scope.$new(true), {
        newsletter: newsletter,
    });

    this.$mdDialog.show({
        template: '<newsletter-form newsletter="newsletter">
  </newsletter-form>',
        clickOutsideToClose: false,
        scope: dialogScope
    }).then(() => this.refresh());
     }

remove(newsletter: INewsletter) {
    let alert = this.$mdDialog.confirm()
        .clickOutsideToClose(true)
        .title('Confirm')
        .textContent('Are you sure ?')
        .ok('Yes')
        .cancel('Cancel');

    this.$mdDialog.show(alert).then(() => {
        this.Newsletter.delete(newsletter.id).then(() => 
this.refresh());
        });
    }

   previewNewsletter(newsletter: INewsletter) {
       this.$state.go('newsletter-preview', {
        id: newsletter.id
       });
   }

  $onInit() {
    this.updateList(this.newsletterPagination);
  }

}

admin.component.ts（我尝试过的）：

import { ISector } from './../../models/sector';
import { ProjectListComponent } from 
'./../project/project.list.component';
import {Component} from '../../decorators/component';
import * as angular from 'angular';
import material = angular.material;
import {SharedService} from "../../services/shared.service";
import {IPromise} from "angular";
 import {IPaginationResponse} from "../../models/pagination/pagination-response";
 import {IAdmin2} from "../../models/admin2";
 import {Admin2Service}  from "../../services/admin2.service";
 import {ProjectService} from "../../services/project.service";
 import {ITechnology} from "../../models/technology";
import {IBusiness} from "../../models/business";
import {IStateService} from 'angular-ui-router';




 @Component({
    templateUrl: '/app/src/components/admin2/admin2.component.html',
bindings: {
    projects: '<',
    consultants: '<',
    newsletters: '<',
    sectors: '<',

    }
 })
export class Admin2Component {
    public search: any = { searchInFile: 0 };
   public promise: IPromise<void>;
   public pagination: any = {
    order: 'trigram',
    limit: 25,
    page: 1
    };

    // Bindings
 public businesses: IBusiness[];
 public technologies: ITechnology[];
 public sectors: ISector[]; 
 public admin2: IAdmin2[];
 public admin2Pagination: IPaginationResponse<IAdmin2>;
 public currentLocale: string;
 public allowedRoles: string[];

 constructor(private $scope: angular.IScope,
            private $mdDialog: material.IDialogService,
            private Shared: SharedService,
            private dateFilter: angular.IFilterDate,                
            private Auth: AuthService,
            private Project: ProjectService,
            private Admin2: Admin2Service,
            private Sector: SectorService,              
            private $state: IStateService,
            private Tracking: TrackingService,
            private Business: BusinessService) {
    'ngInject';
    this.Shared.title = 'ADMIN2';
    this.allowedRoles = ['commercial', 'admin'];
    this.currentLocale = localStorage.getItem('locale');
   }

private updateList(paginationResponse: IPaginationResponse<IProject>) 
{
    this.admin2 = paginationResponse.data;
    this.pagination.total = paginationResponse.meta.pagination.total;
    this.pagination.page = 
 paginationResponse.meta.pagination.current_page;
   }

  isUserAllowed() {
      return this.Auth.isUserAllowed(this.allowedRoles);
   }



refresh() {
       let orderBy = this.pagination.order.startsWith('-') ?
        ? this.pagination.order.substr(1, 
 this.pagination.order.length) :
        : this.pagination.order;
    let orderDirection = this.pagination.order.startsWith('-') ?
        ? 'DESC' :
        : 'ASC';

        if (this.search.end_date)
        this.search.end_date = this.dateFilter(this.search.end_date, 
 'yyyy-MM-dd');

    this.promise = this.Project.getAll(this.search, 
 this.pagination.page, this.pagination.limit, orderBy, 
 orderDirection).then(response => {
        this.promise = this.Sector.getAll().then(response2 => {
            this.sectors = response2.data;
            this.updateList(response.data);
        });
    });
      }

app.routes.ts看起来像这样：

     // Here I had my routing method
     $stateProvider.state({
     name: 'admin2',
     url: '/admin2',
    template:  '<admin2 layout="column" consultant-
     pagination="$resolve.admin2Pagination" 
    technologies="$resolve.technologies" 
    businesses="$resolve.businesses">
    </admin2>',
    resolve: {
        projectPagination: (Project: ProjectService, $stateParams: 
    angular.ui.IStateParamsService) => Project.getAllDefault(null, 
    null).then(response => response.data),
        consultantPagination: (Consultant: ConsultantService, 
     $stateParams: angular.ui.IStateParamsService) => 
     Consultant.getAllDefault(null).then(response => response.data),
        newsletterPagination: (Newsletter: NewsletterService) => 
     Newsletter.getAllDefault().then(response => response.data),
     }
     });