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

Question

我有一个home组件，在Home组件中我正在使用登录组件。

还有另一个名为“我的帐户”的组件，我也必须在帐户页面中使用登录组件。 但我不能在我的帐户组件中使用此登录组件而不添加“当前”类<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()属性就是为了这个。 您可以根据输入值更改组件的行为。

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

码：

登录组合

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。 然后您可以自由地重用您的组件。