Question

我想在几个页面上使用我的组件，包括模态窗口。我们说它叫做CompanyInfoComponent。它有公司标题信息和详细信息的区域。

我使用Angular和Bootstrap 4，我想在页面的不同位置使用不同的组件。我希望第一部分包含compony名称和一些控制元素，第二部分包含所有公司细节，以便我可以在“简单”页面和模态组件上使用它。

一般来说，我希望它像：

一样使用

<div class="container">
    <div class="card">
        <div class="card-block"> 
            <div class="row">
                <div class="col-12">
                    <h4 class="card-title"> 
                        <app-company-info-part-1></app-company-info-part-1>
                    </h4>
                </div>
            </div>
            <app-company-info-part-2></app-company-info-part-2>
        </div> <!--card-block-->
    </div> <!--card-->
</div><!-- container -->

在模态窗口中，我想像

一样使用它

<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">
                <app-company-info-part-1></app-company-info-part-1>
            </h4>
        </div>
        <div class="modal-body">
            <div class="container">
                <app-company-info-part-2></app-company-info-part-2>  
            </div>
        </div>
    </div> <!--modal-content-->
</div> <!-- modal-dialog>

我希望它是单个组件，这样我就可以拥有所有必要方法的单个组件类，因为就代码而言，第1部分和第2部分将紧密耦合。

我知道不可能像我想的那样使角度表现得像，但我认为用例很常见，应该有一些解决方法。如果有人能分享想法，我会很高兴。谢谢！

Answer 1

我建议将其分为两部分，而不是一部分。然后逻辑可以在两个组件共享的服务中。

但是如果你必须在同一个组件中使用这两个组件，你可以使用* ngIf根据需要包含一个或另一个。

以下是一个例子：

<div class="container" *ngIf=!turnOnModal>
    <div class="card">
        <div class="card-block"> 
            <div class="row">
                <div class="col-12">
                    <h4 class="card-title"> 
                        <app-company-info-part-1></app-company-info-part-1>
                    </h4>
                </div>
            </div>
            <app-company-info-part-2></app-company-info-part-2>
        </div> <!--card-block-->
    </div> <!--card-->
</div><!-- container -->
<div class="modal-dialog modal-lg" role="document" *ngIf="turnOnModal">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">
                <app-company-info-part-1></app-company-info-part-1>
            </h4>
        </div>
        <div class="modal-body">
            <div class="container">
                <app-company-info-part-2></app-company-info-part-2>  
            </div>
        </div>
    </div> <!--modal-content-->
</div> <!-- modal-dialog>

我可以为角度组件模板提供多个部件吗？

1 个答案: