Шаблон должен измениться в том же div

ProgramBox

Шаблон должен измениться в том же div

Post author:admin
Запись опубликована:2 мая, 2023
Post category:Вопросы по программированию

#html #css #twitter-bootstrap #angular7

#HTML #css #twitter-bootstrap #angular7

Вопрос:

Я делаю пример проекта Angular.

Итак, я написал шаблон, подобный тому, что половина должна быть каруселью, а другая половина — логином, как показано ниже:

Но когда я нажимаю на регистрацию, он занимает всю страницу, но я хочу, чтобы он заменял логин не на всю ширину страницы.

Я хочу, чтобы изображение также было видно на странице регистрации.

app.component.html

 <header>
  <nav class="navbar navbar-lg navbar-expand-lg  navbar-dark bg-primary">
    <div class="container">
      <a class="navbar-brand" routerLink="/login">Brand</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" routerLink="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" (click)="logout()">Logout</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<!-- main app container -->

<router-outlet></router-outlet>

Войдите component.html

 <div class="row align-items-center">
  <div class="col-6 col-sm-6 justify-content-center align-self-center align-items-center">
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="../assets/img7.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="../assets/img8.jpg" alt=" Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="../assets/img10.jpg" alt=" Third slide">
        </div>
      </div>
    </div>
  </div>
  <div class="col-5 col-sm-5 justify-content-center align-self-center align-items-center">
    <div class="card">
      <div class="card-body text-dark">
        <h2>Login</h2>
        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
          <div class="form-group">
            <label for="username">Username</label>
            <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted amp;amp; f.username.errors }" />
            <div *ngIf="submitted amp;amp; !!f.username.errors" class="invalid-feedback">
              <div *ngIf="!!f.username.errors.required">Username is required</div>
            </div>
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted amp;amp; f.password.errors }" />
            <div *ngIf="submitted amp;amp; !!f.password.errors" class="invalid-feedback">
              <div *ngIf="!!f.password.errors.required">Password is required</div>
            </div>
          </div>
          <div class="form-group">
            <button [disabled]="loading" class="btn btn-primary mr-2">Login</button>

            <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa dIAAAh QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
            />
            <a [routerLink]="['/signup']" class="btn  btn-success">Sign Up</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Signup.component.html

 <div class="card">
  <div class="card-body text-dark">
    <h2>Sign Up</h2>
    <form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="firstName">First Name</label>
        <input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted amp;amp; f.firstName.errors }" />
        <div *ngIf="submitted amp;amp; f.firstName.errors" class="invalid-feedback">
          <div *ngIf="f.firstName.errors.required">First Name is required</div>
        </div>
      </div>
      <div class="form-group">
        <label for="lastName">Last Name</label>
        <input type="text" formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted amp;amp; f.lastName.errors }" />
        <div *ngIf="submitted amp;amp; f.lastName.errors" class="invalid-feedback">
          <div *ngIf="f.lastName.errors.required">Last Name is required</div>
        </div>
      </div>
      <div class="form-group">
        <label for="flatNo">Flat No</label>
        <input type="text" formControlName="flatNo" class="form-control" [ngClass]="{ 'is-invalid': submitted amp;amp; f.flatNo.errors }" />
        <div *ngIf="submitted amp;amp; f.flatNo.errors" class="invalid-feedback">
          <div *ngIf="f.flatNo.errors.required">Last Name is required</div>
        </div>
      </div>
      <div class="form-group">
        <label for="gatedCommunity">Community Name</label>
        <input type="text" formControlName="gatedCommunity" class="form-control" [ngClass]="{ 'is-invalid': submitted amp;amp; f.gatedCommunity.errors }" />
        <div *ngIf="submitted amp;amp; f.gatedCommunity.errors" class="invalid-feedback">
          <div *ngIf="f.gatedCommunity.errors.required">Last Name is required</div>
        </div>
      </div>
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted amp;amp; f.username.errors }" />
        <div *ngIf="submitted amp;amp; f.username.errors" class="invalid-feedback">
          <div *ngIf="f.username.errors.required">Username is required</div>
        </div>
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted amp;amp; f.password.errors }" />
        <div *ngIf="submitted amp;amp; f.password.errors" class="invalid-feedback">
          <div *ngIf="f.password.errors.required">Password is required</div>
          <div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
        </div>
      </div>
      <div class="form-group">
        <button [disabled]="loading" class="btn btn-primary">Register</button>
        <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa dIAAAh QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
        />
        <a [routerLink]="['/login']" class="btn btn-link">Cancel</a>
      </div>
    </form>
  </div>
</div>

Заранее спасибо!

Ответ №1:

Для этого вам нужно показать изображение в родительском компоненте, скажем, app.component.ts я создал stackblitz, чтобы вы поняли. Я надеюсь, вы поймете это StackBlitz

 <div class="col-md-4">
    <img src="test.jpg">
</div>

 <div class="col-md-8">
    <router-outlet></router-outlet>
 </div>

Редактировать

 const appRoutes: Routes = [
    { 
        path: '', 
        component: NormalSiteLayoutComponent, //layout with image
        children: [
          { path: '', component: Login}
        ]
    },
    { 
        path: '',
        component: AppLayoutComponent,  //layout with header and no image
        children: [
          { path: 'dashboard', component: DashboardComponent },
          { path: 'profile', component: ProfileComponent }
        ]
    },

    //no layout routes
    { path: 'home', component: HomeComponent},
    { path: 'test', component: TestComponent},
    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

1. Я понял вашу точку зрения, но я хочу только для входа в систему. если вход в систему успешен, я не хочу, чтобы изображение было на моей домашней странице. @AbdulBasit

2. @keerthireddyeruva для этого у вас могут быть отдельные макеты для ваших компонентов. пожалуйста, смотрите выше редактирование

3. не могли бы вы, пожалуйста, обновить в StackBlitz. большое вам спасибо за вашу помощь. @AbdulBasit