Question

我有一个父组件，其中很少有链接（使用路由）可用于加载子组件。子组件应该在父组件中加载。此外，父组件中可用的过滤器（复选框）很少，必须在加载任何子组件期间应用。

示例代码

<div class="parent">
    <div class = "logo"/>
    <div class = "headercontent">........................</div>
    <div class = "links"><a>**News**</a><a>**Vidoes**</a><a>**Audio**</a></div>
    <div class = "filters">
        <input type="checkbox">Filter 1 </input>
        <input type="checkbox">Filter 2 </input>
        <input type="checkbox">Filter 3 </input>
    </div>
    <div class = "fewmorecontent">........................</div>

    **<router-outlet></router-outlet>**

    <div class = "fewmorecontent">........................</div>
    <div class = "fewmorecontent">........................</div>
</div>

我可以通过点击链接在路由器插座中加载新闻HTML组件或视频HTML组件或音频HTML组件。我能够通过指定子路由来实现这一点。

但必须根据父页面中选择的过滤器过滤子组件。过滤器对于所有子组件都是通用的。

注意：一次只能加载一个子组件，在选择其他组件时，必须覆盖路由器插座中较早的子组件内容

如何将父页面中的过滤器值传递给子组件。

我尝试了几件事

@Input decorator，但无法在路由器插座中设置通过。
与@Input一起，尝试为所有组件提供一个通用选择器，并在路由器插座中添加了选择器（＆lt; app-child＆gt;），但由于每个组件都需要唯一的选择器，因此它会引发错误。
我也尝试过创建服务并传递它，但是无法成功。

希望我能解释这个问题。

任何解决此问题的指南或解决方案？

Answer 1

你想要提供服务。像：

@Injectable()
export class myService(){
  private dataObj$ = new Subject();

  updateData(event: any) {
    this.dataObj$.next(event);
  }

  getData() {
    return this.dataObj$;
  }
}

然后在您的子组件中为getData函数设置订阅者，在过滤器组件中使用updateData函数，子组件将侦听这些更改

编辑：这是一个有效的例子：https://stackblitz.com/edit/angular-aq9wx9

Answer 2

根据我的经验，共享服务将满足您的要求。我将在这里分享一个示例代码片段。

// SharedService

@Injectable()
export class SharedService {

  private message = new BehaviorSubject('First Message');
  sharedMessage = this.message.asObservable();

  constructor() { }

  nextMessage(message: string) {
    this.message.next(message)
  } 
}

//父组件导出类ParentComponent实现OnInit {

  message:string;

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.sharedService.sharedMessage.subscribe(message => this.message = message)
  }
}

// ParentHTML

来自服务的消息：{{message}}

// SiblingComponent

export class SiblingComponent implements OnInit {

  message:string;

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.sharedService.sharedMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    this.sharedService.nextMessage("Second Message")
  }
}

//同级HTML

<h1>Message from Service : {{message}}<h1>
<button (click)="newMessage()">Change Message</button>

可以找到更详细的文档here。

将公共参数传递给路由器插座

2 个答案: