Question

我有一个home组件，并且在Home组件内部，我正在使用登录组件。

还有一个名为“我的帐户”的组件，我也必须在我的帐户页面中使用登录组件。但是，如果不添加'current'类<div id="tab-3" class="log-tab-content current">，就无法在我的帐户组件中使用此登录组件，因为它会弹出并添加当前类使弹出窗口显示出来，因此，如果不添加当前类，它将被隐藏。在主页中，您必须单击以查看登录弹出窗口（组件），这就是激活它的方式。在这种情况下，如何重用组件？

<form [formGroup]="LoginForm" (ngSubmit)="onSubmit()">
    <div id="tab-3" class="log-tab-content">
      <div class="login-form">
        <div class="login-mid">            
              </div>
        <input type="text"/>
        </div>
        <button type="submit" class="log-button log-button1">Reset Password</button>
      </div>
    </div>
</form>

Answer 1

是的，@Input()属性是为此目的而设计的。您可以根据输入值更改组件的行为。

根据父级发送的某些current属性，使用ngClass动态设置input类。
将login之类的输入从my-account发送到[showPopup]="true" comp。

代码：

登录补偿

class LoginComponent{
  @Input() showPopup: boolean = false;
}

login.html

<form [formGroup]="LoginForm" (ngSubmit)="onSubmit()">
    <div id="tab-3" class="log-tab-content" [ngClass]="{'current':showPopup === true}">
      <div class="login-form">
        <div class="login-mid">            
              </div>
        <input type="text"/>
        </div>
        <button type="submit" class="log-button log-button1">Reset Password</button>
      </div>
    </div>
</form>

我的帐户

<login [showPopup]="true"></login>

Answer 2

我认为您可以将登录组件包装在某些方言组件（例如，材料方言）中，而不是使用客户类来更改CSS。然后，您可以自由地重用您的组件。

是否可以在经过一些修改的另一个组件内部使用一个组件

2 个答案: