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

Question

I have a home component and inside the Home component I am using the login component.

There is another component named My Account and I have to use the login component in my account page as well. But I cannot use this login component inside the my account component without adding 'current' class <div id="tab-3" class="log-tab-content current"> because its a popup and adding the current class makes the popup to show so it will be hidden if I dont add current class. In the home page you have to click to view the login popup (component), thats how it gets activated. How could I reuse the component in this case ?

<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

Yes, @Input() properties are meant for that. You can change the behavior of component based on the input values.

1. Set current class dynamically using ngClass based on some input property sent by parent.
2. Send input to login comp from my-account like [showPopup]="true" .

Code:

login comp ts

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>

my-account

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

Answer 2

I think you could just wrap the login component in some dialect component(material dialect for example) instead of using customer class in order to change the css. Then you are free to reuse your component.