Question

我试图简单地在模板上反映API数据。我有一个列表组件。用户列表，其中包含详细信息链接。通过单击它，可以调用另一个组件。我有一个菜单部分，此时应该更改。菜单来自我的节点服务器。因此，当我单击用户列表的详细信息链接并转到详细信息组件时，我必须更改菜单。我想，所有3个组件都是无关的。我发布下面的文件

菜单服务是我用作共享服务并编写了一个emitchange函数来改变菜单，并使用mainMenuService.menuChangeEmitted $ .subscribe尝试从组件中获取。 clientlist.component.html是我调用appconfig.component.ts的地方。但菜单没有更新。

主menu.service.ts

@Injectable()
export class MainMenuService {

  private menuSource = new BehaviorSubject<any>([]);
  currentMenu = this.menuSource.asObservable();
  mainMenuItems: MainMenuItem[];
  // Observable string sources
  private emitChangeSource = new Subject();

  // Observable string streams
  menuChangeEmitted$ = this.emitChangeSource.asObservable();

  private apiUrl;
  constructor(private http: Http, private errorService: ErrorService, private router: Router) {
    this.apiUrl = environment.apiUrl;
  }

  changeMenu(menu: any){
    //console.log(menu);
    this.menuSource.next(menu);
  }

  // Service message commands
  emitChange(change: MainMenuItem[]) {
    this.emitChangeSource.next(change);
  }

主menu.component.ts

export class MainMenuComponent {
  mainMenuItems: MainMenuItem[];

  constructor(private mainMenuService: MainMenuService) {
    mainMenuService.menuChangeEmitted$.subscribe(
      menu => {
        console.log(menu)
        this.mainMenuItems = <MainMenuItem[]>menu;
        //localStorage.setItem('roles', JSON.stringify(menu.roles));
      }
    );
  }

  getMainMenuItems(): void {
    this.mainMenuService.getMainMenuItems()
        .subscribe(
            data => {
                //console.log(data);
                //this.mainMenuItems = data.menus;
                this.mainMenuService.emitChange(data.menus);

                localStorage.setItem('roles', JSON.stringify(data.roles));
                //console.log(JSON.parse(localStorage.getItem('roles')));
            },
            error => {
              console.log(error);
    });
    //this.mainMenuService.getMainMenuItems().then(mainMenuItems => this.mainMenuItems = mainMenuItems);
  }

  ngOnInit(): void {
    this.getMainMenuItems();



  }


}

appconfig.component.ts

  export class AppconfigComponent {
config(id){
    if(localStorage.getItem('user_type') == 'admin' || localStorage.getItem('user_type') == 'subadmin'){
      localStorage.setItem('clientAppId', this.appid);
      localStorage.setItem('user_type', 'client');
      this.mainMenuService.getMainMenuItems()
          .subscribe(
              data => {
                  this.mainMenuService.emitChange(data.menus);
                  localStorage.setItem('roles', JSON.stringify(data.roles));
              },
              error => {
                console.log(error);
      });
    }
}
}

menu html

<nav class="main-menu">
  <ul>
    <li
      class="menu-item"
      *ngFor="let item of mainMenuItems"
      [ngClass]="{
        'has-sub': item.sub,
        'active': item.active,
        'menu-item-group': item.groupTitle
      }"
      class="{{item.customClass}}"
      routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}"
    >
      <!-- Group title -->
      <span class="group-title" *ngIf="item.groupTitle">{{ item.title }}</span>

      <!-- Simple item -->
      <a href="#" routerLink="{{ item.routing }}" class="item-link" *ngIf="!item.groupTitle && !item.sub">
        <span class="text">{{ item.title }}</span>
        <span class="item-badge" *ngIf="item.budge" [ngStyle]="{'background': item.budgeColor}">{{ item.budge }}</span>
        <span class="icon"></span>
        <!-- <span class="icon1">
            <img src="assets/img/logo-1.png" alt="">
        </span> -->

      </a>

      <!-- Item with sub -->
      <a href="#" class="item-link" *ngIf="!item.groupTitle && item.sub" (click)="toggle($event, item, this)">
        <span class="text">{{ item.title }}</span>
        <span class="item-badge" *ngIf="item.budge" [ngStyle]="{'background': item.budgeColor}">{{ item.budge }}</span>
        <i class="caret fa fa-angle-right" *ngIf="item.sub"></i>
        <span class="icon" *ngIf="item.icon" [ngClass]="item.icon"></span>
      </a>

      <!-- Menu sub -->
      <ul class="sub" *ngIf="!item.groupTitle && item.sub">
        <li
          class="menu-item"
          *ngFor="let itemSub of item.sub"
          routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}"
        >
          <a href="#" routerLink="{{ itemSub.routing }}" class="item-link">{{ itemSub.title }}</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

如果您多次提供服务，那么您将获得该服务的多个实例。如果更新一个实例的状态，则另一个实例不会更改。

删除组件中的服务提供者，只将其保留在模块中。

提供有关创建的实例数，创建方式以及实例可用于应用程序的哪个部分。

注入是从提供者请求实例。这是通过将构造函数参数添加到由DI（component，directive，service，...）创建的类来完成的。

无法通过共享服务

1 个答案: