Angular 从所选数据传递数据<；mat选件>；进入另一个组件-角材料

我基本上有两个部分。第一个包含角材质选项（mat选项），用于从组合框中选择选项。第二个应该显示所选的数据。 我已经使用Subject创建了一个共享服务，希望在他们之间传递它，但这不是运气

服务

@Injectable()
export class ToothpasteService {
    toothpasteName: Subject<string>;
    toothpasteName$: Observable<any>;

    constructor() {
        this.toothpasteName = new Subject();
        this.toothpasteName$ = this.toothpasteName.asObservable();
    }
}

牙膏组件.html

       <div class="container">
            <mat-form-field>
            <mat-label>Select your toothpaste: </mat-label>
            <mat-select>
                <mat-option *ngFor="let toothpaste of toothpastes" [value]="toothpaste.viewValue" (onSelectionChange)="onToothpasteChanged(toothpaste.viewValue)">
                    {{toothpaste.viewValue}}
                </mat-option>
            </mat-select>
            </mat-form-field>
       </div>

  <div class="justify-content-start align-items-start align-self-center">
    <p>Toothpaste Selected: {{toothpasteName}}</p>
  </div>

HeaderComponent.html

       <div class="container">
            <mat-form-field>
            <mat-label>Select your toothpaste: </mat-label>
            <mat-select>
                <mat-option *ngFor="let toothpaste of toothpastes" [value]="toothpaste.viewValue" (onSelectionChange)="onToothpasteChanged(toothpaste.viewValue)">
                    {{toothpaste.viewValue}}
                </mat-option>
            </mat-select>
            </mat-form-field>
       </div>

  <div class="justify-content-start align-items-start align-self-center">
    <p>Toothpaste Selected: {{toothpasteName}}</p>
  </div>

已选择牙膏：{{牙膏名称}

---

这是行不通的。我遗漏了什么吗？

您可能有同步问题。检查这一点（并可能改进您的共享服务）的一个好方法是将

主题

替换为

行为主题

（阅读更多信息。这样做并告诉你的

头组件

是否从新的

行为主体

访问初始数据有助于确定问题的根源。编辑：你也不应该让你的

牙膏名

主体公开，它应该是私有的，你应该只公开观察者和更新方法d、 您可能有同步问题。检查（并可能改进您的共享服务）的一个好方法是将

主题

替换为

行为主题

（阅读更多信息。这样做并告诉你的

头组件

是否从新的

行为主体

访问初始数据有助于确定问题的根源。编辑：你也不应该让你的

牙膏名

主体公开，它应该是私有的，你应该只公开观察者和更新方法D