Stencilノート(3)-アクセサリー

Stencilは、豊富なインタラクティブなコンポーネントを簡単に構築できます.
現在、以下の装飾器があります.
component
prop
watch
state
method
element
1、Component装飾器:
各コンポーネントはこのアクセサリーで飾らなければなりません.アクセサリーの中で最も基本的なのはtagメタデータで、もちろんstyleUrlもほとんど必要です.さらにstyleUrlsもあり、このメタデータは複数のスタイルシートを参照できます.

import { Component } from '@stencil/core';
@Component({
  tag: 'todo-list',
  styleUrl: 'todo-list.scss'
})
export class TodoList {
  ...
}

コンポーネントのプロパティまたはclassを設定するオプションのhostメタデータもあります.

import { Component } from '@stencil/core';

@Component({
  tag: 'todo-list',
  styleUrl: 'todo-list.scss',
  host: {
    theme: 'todo',
    role: 'list'
  }
})

 ， class role 
<todo-list class='todo' role='list'>todo-list>

2、Prop Decorator(属性装飾器)
感覚はngの@Inputと同様に,属性をカスタマイズするために用いられる.次のようになります.

import { Prop } from '@stencil/core';
...
export class TodoList {
  @Prop() color: string;
  @Prop() favoriteNumber: number;
  @Prop() isSelected: boolean;
  @Prop() myHttpService: MyHttpService;
}

JSXでは、

list color="blue" favoriteNumber="24" isSelected="true">list>

これらのカスタム属性値はjsでも取得できます.

const todoListElement = document.querySelector('todo-list');
console.log(todoListElement.myHttpService); // MyHttpService
console.log(todoListElement.color); // blue

prop値の可変性
@Propのデフォルトでは、コンポーネントロジックの内部では可変ではありません.値を設定すると、コンポーネントは内部で更新できません.
ただし、以下の例に示すように、@Propを表示してコンポーネント内部から変更することができます.

import { Prop } from '@stencil/core';
...
export class NameElement {
  @Prop({ mutable: true }) name: string = 'Stencil';

  componentDidLoad() {
    this.name = 'Stencil 0.7.0';
  }
}

Propはデフォルトの値を設定し、検証を開始できます.
以下に示すように、nameの値はデフォルトでStencilです.入力を検証するには、@watchアクセラレータを使用します.

import { Prop, Watch } from '@stencil/core';
...
export class TodoList {
  @Prop() name: string = 'Stencil';

//  ， ， 2
  @Watch('name')
  validateName(newValue: string, oldValue: string) {
    const isBlank = typeof newValue == null;
    const atLeast2chars = typeof newValue === 'string' && newValue.length >= 2;
    if (isBlank) { throw new Error('name: required') };
    if ( !atLeast2chars ) { throw new Error('name: atLeast2chars') };
  }
}

...
3、Watch装飾器
ユーザがpropを変更するとwatchのリスニングがトリガーされ、関数が呼び出されます.上で使ったように.
4、コンポーネントの状態を管理するState装飾器
@State()装飾は、コンポーネント管理のための内部データに使用できます.これは、ユーザーがコンポーネントの外部から属性を変更できないことを意味します.@State()プロパティの変更により、コンポーネントreader関数が再呼び出されます.

import { State } from '@stencil/core';

...
export class TodoList {
  @State() completedTodos: Todo[];

  //  State ， reader 
  completeTodo(todo: Todo) {
    // This will cause our render function to be called again
    this.completedTodos = [...this.completedTodos, todo];
  }

  render() {
    //
  }
}

5、方法装飾器
@Method()装飾コンポーネントを定義するための共通インタフェース.@Method()アクセラレータで装飾された関数は、要素から直接呼び出すことができます.

import { Method } from '@stencil/core';
...
export class TodoList {

  @Method()
  showPrompt() {
    // show a prompt
  }
}

コンポーネントを取得するとメソッドが呼び出され、役に立つ様子です.

const todoListElement = document.querySelector('todo-list');
todoListElement.showPrompt();

6、元素装飾器
これはよくわかりませんが、HTML Elementのインスタンスを取得しますか?

import { Element } from '@stencil/core';

...
export class TodoList {

  @Element() todoListEl: HTMLElement;

  addClass(){
    this.todoListEl.classList.add('active');
  }
}

ネストされたコンポーネント
ngまたはIonicとは異なり、サブコンポーネントもオリジナルHTMLラベルであるため、コンポーネントをネストする際に表示せずにサブコンポーネントをインポートします.親コンポーネントで直接使用できます.

import { Component } from '@stencil/core';

@Component({
  tag: 'my-parent-component'
})
export class MyParentComponent {

  render() {
    return (
      <div>
//   ， 
        <my-embedded-component color="red">my-embedded-component>
      div>
    );
  }
}