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>
  • 相关阅读:
    Snmpwalk
    本地使用PostMan测试接口没有问题,但是线上直接进不了接口
    redis使用注意事项
    线程笔记
    springboot笔记
    springboot中多个地址指向同一个方法
    开发过程中遇到的注解
    使用maven时用到的一些问题
    遇到线程安全问题的案例
    mongodb
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6414635.html
Copyright © 2011-2022 走看看