zoukankan      html  css  js  c++  java
  • [Angular] Content Projection with ng-content

    For example there is tow form compoennts on the page, and what we want to do is reusing the form component. Make to tow form behave differently, we can using <ng-content> inside form and pass what we want from the parent component.

    // app.component.ts
    
        <div>
          <auth-form 
            (submitted)="createUser($event)">
            <h3>Create account</h3>
            <button type="submit">
              Join us
            </button>
          </auth-form>
          
          
          <auth-form 
            (submitted)="loginUser($event)">
            <h3>Login</h3>
            <button type="submit">
              Login
            </button>
          </auth-form>
        </div>

    For each form we have different event handler such as 'createUser' and 'loginUser'. Besides that for each form we pass one h3 tag and one button tag.

    To see how it should looks like:

    Now let's see how to write form component to make this happen.

    // auth-form.component.ts
    
        <div>
          <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
            <ng-content select="h3"></ng-content>
            <label>
              Email address
              <input type="email" name="email" ngModel>
            </label>
            <label>
              Password
              <input type="password" name="password" ngModel>
            </label>
            <ng-content select="button"></ng-content>
          </form>
        </div>

    <ng-content> has 'select' attr, which is similar to css selector, you can use component, class, id...


    The way I prefer is attribute selector:

          <auth-form 
            (submitted)="createUser($event)">
            <h3 auth-form-title>Create account</h3>
            <button auth-form-submit type="submit">
              Join us
            </button>
          </auth-form>

    So we you can use it like:

        <div>
          <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
            <ng-content select="[auth-form-title]"></ng-content>
            <label>
              Email address
              <input type="email" name="email" ngModel>
            </label>
            <label>
              Password
              <input type="password" name="password" ngModel>
            </label>
            <ng-content select="[auth-form-submit]"></ng-content>
          </form>
        </div>

     ng-content also accept customer component.

    For example, there is a component:

    @Component({
      selector: 'auth-remember',
      template: `
        <label>
          <input type="checkbox" (change)="onChecked($event.target.checked)">
          Keep me logged in
        </label>
      `
    })
    export class AuthRememberComponent {
    
      @Output() checked: EventEmitter<boolean> = new EventEmitter<boolean>();
    
      onChecked(value: boolean) {
        this.checked.emit(value);
      }
    }

    And we can use it:

          <auth-form 
            (submitted)="loginUser($event)">
            <h3>Login</h3>
            <auth-remember
              (checked)="rememberUser($event)">
            </auth-remember>
            <button type="submit">
              Login
            </button>
         </auth-form>

    Insie form component, we add slot for the new component.

        <div>
          <form (ngSubmit)="onSubmit(form.value)" #form="ngForm">
            <ng-content select="h3"></ng-content>
            <label>
              Email address
              <input type="email" name="email" ngModel>
            </label>
            <label>
              Password
              <input type="password" name="password" ngModel>
            </label>
            <ng-content select="auth-remember"></ng-content>
            <ng-content select="button"></ng-content>
          </form>
        </div>

    Lastly, just like 'switch' in any programming lanugage, it has a 'default' case, for content projection is the same, anything which is not match to the selector, it will goes to default slot. So how to define a default slot for content projection?

    Actually it is quite símple:

    <div>
        <ng-content select=".higlight"></ng-content>
        <ng-content select="authComponent"></ng-content>
        <!-- Default case-->
        <ng-content></ng-content>
    </div>
  • 相关阅读:
    SDN第三次作业
    SDN第二次上机作业
    SDN第二次作业
    第七次作业之总结篇
    第八次_计算器重构
    第六次作业之计算器图形界面化
    C++课程 second work _1025
    第五次作业--计算器项目之学习文件读取方式
    C++课程 first work
    第四次作业-计算功能的实现
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6414635.html
Copyright © 2011-2022 走看看