Renders a tooltip component.

  • Use the React.useState() hook to create the show variable and initialize it to false.
  • Return a <div> element that contains the <div> that will be the tooltip and the children passed to the component.
  • Handle the onMouseEnter and onMouseLeave methods, by altering the value of the show variable.

继续阅读 30秒学会 React 片段 – Tooltip

Renders an <input> element that uses a callback function to pass its value to the parent component.

  • Use object destructuring to set defaults for certain attributes of the <input> element.
  • Render an <input> element with the appropriate attributes and use the callback function in the onChange event to pass the value of the input to the parent.

继续阅读 30秒学会 React 片段 – UncontrolledInput

It is possible to add global event listeners in your Components/Directives with HostListener. Angular will take care of unsubscribing once your directive is destroyed.

@Directive({
  selector: '[rightClicker]'
})
export class ShortcutsDirective {
  @HostListener('window:keydown.ArrowRight')
  doImportantThings() {
    console.log('You pressed right');
  }
}

继续阅读 30秒学会 Angular 片段 – Global event listeners

You can create own helper component and use it instead of *ngIf.

@Component({
  selector: 'loader',
  template: `
    <ng-content *ngIf="!loading else showLoader"></ng-content>
    <ng-template #showLoader>🕚 Wait 10 seconds!</ng-template>
  `
})
class LoaderComponent {
  @Input() loading: boolean;
}

For usage example:

<loader [loading]="isLoading">🦊 🦄 🐉</loader>

Note that the content will be eagerly evaluated, e.g. in the snippet below destroy-the-world will be created before the loading even starts:

<loader [loading]="isLoading"><destroy-the-world></destroy-the-world></loader>

继续阅读 30秒学会 Angular 片段 – Loader Component

It’s possible to use @ViewChild (also @ViewChildren and @ContentChild/Children) to query for components of different types using dependency injection.

In the example below we can use @ViewChildren(Base) to get instances of Foo and Bar.

abstract class Base {}

@Component({
  selector: 'foo',
  providers: [{ provide: Base, useExisting: Foo }]
})
class Foo extends Base {}

@Component({
  selector: 'bar',
  providers: [{ provide: Base, useExisting: Bar }]
})
class Bar extends Base {}

// Now we can require both types of components using Base.
@Component({ template: `<foo></foo><bar></bar>` })
class AppComponent {
  @ViewChildren(Base) components: QueryList<Base>;
}

继续阅读 30秒学会 Angular 片段 – Getting components of different types with ViewChild

Renders a textarea component with a character limit.

  • Use the React.useState() hook to create the content state variable and set its value to value.
    Create a method setFormattedContent, which trims the content of the input if it’s longer than limit.
  • Use the React.useEffect() hook to call the setFormattedContent method on the value of the content state variable.
  • Use a<div> to wrap both the<textarea> and the <p> element that displays the character count and bind the onChange event of the <textarea> to call setFormattedContent with the value of event.target.value.

继续阅读 30秒学会 React 片段 – LimitedTextarea

Renders a toggle component.

  • Use the React.useState() to initialize the isToggleOn state variable to false.
  • Use an object, style, to hold the styles for individual components and their states.
  • Return a <button> that alters the component’s isToggledOn when its onClick event is fired and determine the appearance of the content based on isToggleOn, applying the appropriate CSS rules from the style object.

继续阅读 30秒学会 React 片段 – Toggle

Renders a <select> element that uses a callback function to pass its value to the parent component.

  • Use object destructuring to set defaults for certain attributes of the <select> element.
  • Render a <select> element with the appropriate attributes and use the callback function in the onChange event to pass the value of the textarea to the parent.
  • Use destructuring on the values array to pass an array of value and text elements and the selected attribute to define the initial value of the <select> element.

继续阅读 30秒学会 React 片段 – Select

Renders an <input> element with internal state, that uses a callback function to pass its value to the parent component.

  • Use object destructuring to set defaults for certain attributes of the <input> element.
  • Use the React.setState() hook to create the value state variable and give it a value of equal to the defaultValue prop.
  • Use the React.useEffect() hook with a second parameter set to the value state variable to call the callback function every time value is updated.
  • Render an <input> element with the appropriate attributes and use the the onChange event to upda the value state variable.

继续阅读 30秒学会 React 片段 – ControlledInput

Renders a string as plaintext, with URLs converted to appropriate <a> elements.

  • Use String.prototype.split() and String.prototype.match() with a regular expression to find URLs in a string.
  • Return a <React.Fragment> with matched URLs rendered as <a> elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.

继续阅读 30秒学会 React 片段 – AutoLink