Question

假设我有一个带有模板的父组件，看起来像这样。

工具提示嵌套在模态中，而模态又嵌套在选项卡中。

我想从最外面的组件（父组件）访问最内部的组件（工具提示），所以我可以根据某些条件手动切换它。

我怎样才能实现这个目标？

<ngb-tabset>
 <ng-tab>
    ~
 </ng-tab>
 <ng-tab>
  <ng-template ngbTabContent>
    <ng-template  #content1 let-c="close" let-d="dismiss">
     <div class="modal-header">
      <h4 class="modal-title">header</h4>
     </div>
    <div class="modal-body">
     <ng-template #tipContent1>Error Message</ng-template>
     <input type="email" class="form-control"  name="email" [(ngModel)]="email" [ngbTooltip]="tipContent1" #t1="ngbTooltip" required>
    </div>
    <div class="modal-footer">footer</div>
    </ng-template>
  </ng-template>
 </ng-tab>
</ngb-tabset>

*我无法控制子组件，只能控制父组件。

Answer 1

使用共享服务：

<强>服务

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>3.2.0</version>
            <configuration>
                <attachClasses>true</attachClasses>
            </configuration>
        </plugin>

组件1（发件人）：

@Injectable()
export class MyService {
    myMethod$: Observable<any>;
    private myMethodSubject = new Subject<any>();

    constructor() {
        this.myMethod$ = this.myMethodSubject.asObservable();
    }

    myMethod(data) {
        console.log(data); // I have data! Let's return it so subscribers can use it!
        // we can do stuff with data if we want
        this.myMethodSubject.next(data);
    }
}

组件2（接收方）：

export class SomeComponent {
    public data: Array<any> = MyData;

    public constructor(private myService: MyService) {
        this.myService.myMethod(this.data);
    }
}

通过这种方法，组件（甚至不直接相关）可以持续通信。

Check documentation!

ng-bootstrap：如何访问嵌套组件？

1 个答案: