Question

我想创建一个服务，负责打开带有错误和成功通信的bootstrap popovers。我有两个组件ErrorComponent，SuccessComponent和一个名为CommunicatesComponent的服务。我想使用此服务打开像

这样的popover

service.error('some error')
service.success('success!')

这应该显示popover，提供的文本作为参数。我正在做的是在服务中设置组件属性，如下所示，并在此服务中使用此属性：

ErrorComponent

export class ErrorComponent implements OnInit {
    public text:string;
    @ViewChild('errorPopover') private errorPopover: NgbPopover;

    constructor(private communicatesService:CommunicatesService) {       
    }

    public ngOnInit() {
        this.communicatesService.setErrorComponent(this)
    }
}

服务：

@Injectable()
export class CommunicatesService {
    private errorComponent:ErrorComponent

    public setErrorComponent(component:ErrorComponent) {
        this.errorComponent = component;
    }

    public error(text:string) {
        console.log(this.errorComponent)
       // this.errorComponent.text = text;
    }
}

不幸的是，似乎我的组件对象没有很好地提供，因为控制台日志打印未定义。应该如何做？

此致

Answer 1

我会在设计中改变两件事

ErrorComponent和CommunicatesService相互依赖。避免它是件好事 - CommunicatesService可以轻松地使用不同的组件。因此，您可以创建服务的rx Observable公共属性，因此任何组件都可以订阅它。当service.success('success!')时，服务会将消息文本发送给订阅者。
在ErrorComponent中，您将弹出窗口组件作为@ViewChild。您可以考虑直接将ErrorComponent.text绑定到弹出窗口（逆转依赖关系）。

这些变化可以解决您遇到的问题并使设计更加松散 - 更容易理解和维护。

在Angular 2中打开服务中的错误弹出窗口

1 个答案: