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>
  • 相关阅读:
    因式分解
    插入排序算法
    小技巧(杂乱篇章)
    错误的模糊应用(类继承问题)
    同源策略和跨域解决方案
    Django admin源码剖析
    Python中该使用%还是format来格式化字符串?
    Django的认证系统
    Django中间件
    Django form表单
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6414635.html
Copyright © 2011-2022 走看看