지시어 @Inputs에서 대괄호 [ ]를 사용할 때와 사용하지 않을 때는?

지시어 @Inputs에서 대괄호 [ ]를 사용할 때와 사용하지 않을 때는?

좀 헷갈리네요.

다음과 같은 간단한 설명을 참조하십시오.

 @Directive({
      selector: '[myDirective]'
    })
    export class MyDirective {

      private text: string;
      private enabled: boolean;

      @Input() myDirective:string;

      @Input('myText')
      set myText(val: string) {
        this.text = val;
      }

      @Input('myEnabled')
      set myEnabled(val: boolean) {
        this.enabled = val;
      }

      ngOnInit() {

        console.log("myDirective string: " + this.myDirective);
        console.log("myText string: " + this.text); 
        console.log("myEnabled boolean: " + this.enabled);
    }
}

내 html이 다음과 같이 보인다면:

<div [myDirective]="myDefaultText" [myEnabled]="true"  [myText]="abc"></div>

출력은 다음과 같습니다.

myDirective string: myDefaultText real value  // good
myEnabled boolean: true                       // good
myText string: undefined                      // Why?

[]을(를) 제거하는 경우myText:

<div [myDirective]="myDefaultText" [myEnabled]="true"  myText="abc"></div>

출력은 다음과 같습니다.

myDirective string: myDefaultText real value  // good
myEnabled boolean: true                       // good
myText string: abc                            // GOOD

제거할 수도 있습니다.[]부터myEnabled그것도 잘 될 겁니다.자, 여기 저의 혼란이 있습니다 - 대괄호를 사용해야 할 때.[]사용할 사용자를 원하지만 그렇지 않을 경우myDirective내 생각에 대괄호는 그들이 그들의 집에서[]항상 그곳에 있어야 합니다.그렇지 않습니까?

사용할때[]에 묶다@Input(), 기본적으로 템플릿의 표현입니다.

동일한 방법으로 표시{{abc}}아무 것도 표시하지 않습니다(실제로라는 변수가 있지 않은 한).)abc).

문자열이 있는 경우@Input(), 그리고 일정한 문자열에 묶고 싶다면, 다음과 같이 묶을 수 있습니다.[myText]=" 'some text' ", 또는 간단히 말해서, 일반 HTML 속성처럼:myText="some text".

이유[myEnabled]="true"일했다는 것은true는 유효한 템플릿 식이며 물론 부울로 평가됩니다.true.

글을쓰면<img [src]="heroImageUrl">그 말은 오른쪽이heroImageUrl템플릿 표현식입니다.

사이의 단순한 차이점은[myText]="abc"그리고.myText="abc"이전의 경우 템플릿 식을 사용하여 대상 PROPITY myText를 설정하기 위해 각도를 요청하는 것입니다.abc, 후자의 경우 'abc' 문자열을 사용하여 myText라는 대상 속성을 설정합니다.

HTML에 대해 조금 더 알아보겠습니다.

HTML에서는 이와 같은 요소를 정의할 수 있습니다.

<input type="text" value="Bob">

입력은 다음의 요소입니다.attributes유형과 가치입니다.브라우저가 이 요소를 구문 분석하면 이 요소에 대한 DOM 항목(개체)이 만들어집니다.DOM 항목에는 다음과 같은 항목이 있습니다.propertiesalign, baseURI, child Node, children 등이 있습니다.HTML 속성과 DOM 속성의 차이 참조.때때로 속성과 속성의 이름이 같아서 혼동을 일으킵니다.위 입력 태그의 경우 속성을 갖습니다.value= 밥은 재산도 가지고 있고요.value텍스트 상자에 입력하는 값을 가질 수 있습니다.요약하면 속성은 태그에 대해 정의하는 것이고 속성은 DOM 트리에서 생성되는 것입니다.

Angular 세계에서 속성의 유일한 역할은 요소와 가능하면 지시 상태를 초기화하는 것입니다.데이터 바인딩을 쓸 때는 대상 개체의 속성과 이벤트만 다루고 있습니다.HTML 속성이 효과적으로 사라집니다.

에서.<div [myDirective]="myDefaultText" [myEnabled]="true" [myText]="abc"></div>당신은 본질적으로 다음과 같이 말하고 있습니다.

1. 을 합니다.myDirective나의 디브 요소로.
2. 을 myEnabled◦ 표현으로 표정이 표현에 오른쪽이 나옵니다.true , Enabled 이 입니다 의 입니다 이 의
3. 을 myText◦ 표현으로 표정이 표현에 오른쪽이 나옵니다.abc정의된? 정의된 abc가 있습니까?아니요, 그래서 식이 정의되지 않은 것으로 평가되었습니다.

대괄호는 Angular가 템플릿 식을 평가하도록 지시합니다.대괄호를 생략하면 Angular는 문자열을 상수로 취급하고 해당 문자열로 대상 속성을 초기화합니다.문자열을 평가하지 않습니다!

다음과 같은 실수를 하지 마십시오.

    <!-- ERROR: HeroDetailComponent.hero expects a
         Hero object, not the string "currentHero" -->
    <hero-detail hero="currentHero"></hero-detail>

확인: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding

구속력이 있는[]개체의 경우 값은 문자열입니다.종류에 주의하세요.

코드에

<div [myDirective]="myDefaultText" [myEnabled]="true"  [myText]="abc"></div>

수 은 를 를 할 은 의 은 의 를 할 를 undefined. . . 을 하면 가 가 하면 을 string속성에 할당된 값입니다.

속성 바인딩에 대한 Angular 가이드에서:

대괄호인 []는 Angular가 할당의 오른쪽을 동적 표현식으로 평가하게 합니다.대괄호가 없으면 Angular는 오른쪽을 문자열 리터럴로 처리하고 속성을 해당 정적 값으로 설정합니다.

Angular 13의 최신 업데이트입니다.

예를 들어...

다음과 같은 입력 변수가 있다고 가정합니다.carImage값, 즉 에는 로부터 된 URL 됩니다 에는 됩니다 이 로부터 된 .

@Input() carImage = '';

시나리오 1 - 대괄호 사용

<img [src]="carImage"></img>

이 이든 에 에 이든 가 carImage수는에다됩니다.src의의 속성img는 . 가 입니다.property binding할 수 있습니다 즉, 을 으로 할 할 을 으로 .

시나리오 2 - 대괄호 미포함

<img src="carImage"></img>

이 은 은 carImage될입니다에 됩니다.srcattribute,않은 할 수 .attribute,서 Angular가된 URL를다수할로는다수e할,를된etteeeern가lyo

작동하려면 아래와 같이 유효한 URL을 지정해야 합니다.

<img src="http://demo/carImage.jpg"></img>

언급URL : https://stackoverflow.com/questions/43633452/when-to-use-square-brackets-in-directives-inputs-and-when-not