각도 2 컴포넌트를 속성 선택자와 함께 사용할 수 있습니까?

Question

우리는 현재 온 프레미스 Sharepoint 2013 환경에서 사용되는 기존의 소형 Angular 1 프로젝트를 보유하고 있습니다. 우리 콘텐츠의 대부분은 Sharepoint 환경에서 게시 페이지를 사용합니다.

각도 1을 사용하면 으로 제한되도록 지시문을 정의 할 수 있습니다. 속성 이름, 태그 이름, 설명 또는 클래스 이름은입니다. 우리가 작성한 지시문의 대부분은 속성 또는 태그 이름이었습니다. 기호는 태그 이름 이었지만 Sharepoint의 게시 플랫폼은 을 알 수 없으므로 요소를 제거합니다. 즉, 우리의 지시어를 출판 페이지로 가져 오기 위해 우리는 속성을 사용하게되었습니다. Angular 2에서는 태그 이름으로 구현 된 구성 요소 만 보았습니다.

Angular 2에서 구성 요소를 사용하기 위해 속성 이름을 사용할 수 있습니까? 셰어 포인트 게시 플랫폼의 제한 때문에 이는 우리에게 필수 사항입니다.

감사합니다.

Answer 1

는 예, @Component 장식의 selector 속성이 CSS selector (또는 일부)입니다 :

selector :'.cool-button:not(a)'

템플릿 내에서이 지시어를 식별하는 CSS 선택기를 지정합니다. 지원되는 선택기는 element, [attribute], .class 및 :not()입니다.
이 아닌 경우은 부모 - 자식 관계 선택자를 지원합니다.

_{출처 :Angular Cheat Sheet/Directive Configuration, 어떤 @Component 상속합니다.}

@Component({ 
    selector: "[other-attr]", 
    ... 
}) 
export class OtherAttrComponent { 

괜찮다 demo plunker here : 같은

당신이 [name-of-the-attribute] 사용할 수있는 방법 (즉, CSS attribute selector).

일반적인 방법은 CSS type (AKA element or tag) selector입니다 :

@Component({ 
    selector: "some-tag", 
    ... 
}) 

을 그리고 이름 some-tag으로 태그를 일치합니다.

@Component({ 
    selector: "other-both,[other-both]", 
    template: `this is other-both ({{ value }})` 
}) 
export class OtherBothComponent { 

Demo plunker이 세 가지의 예를 포함

당신은 both a tag or an attribute 일치하는 구성 요소가있을 수 있습니다.

[attributeName="attributeValue"]이 지원됩니까?

예. 그러나 따옴표를 유의하십시오. 현재 구현에서 셀렉터 [attributeName="attributeValue"]은 실제로 <sometag attributeName='"attributeValue"'>과 일치하므로이 방법을 사용하기 전에 테스트 해보십시오.

Answer 2

예, 이에 따라 https://angular.io/docs/ts/latest/guide/cheatsheet.html (구성 요소와 지시문은 일반적으로 매우 유사합니다). 대신 요소 선택기를 사용 :

selector: 'custom-element-name' 

사용 :

selector: '[custom-attribute-name]' 

그리고 당신의 부모 구성 요소의 템플릿

:

물론

<div custom-attribute-name></div> 

Answer 3

. 기본적으로이 단지 CSS 선택기, 그래서 당신이 사용해야 할 경우 그냥 이렇게 속성 :

@Component({ 
    selector: "my-tag[with-my-attribute]" 
}) 

Answer 4

@Component 데코레이터 지원, 요소 선택기, 속성 선택 및 클래스 선택기의 선택기 속성 :

1. 요소 선택 :

@Component({ 
selector: 'custom-element-name' 
}) 

사용법 :<app-servers></app-servers>

2 속성 선택 자 :

@Component({ 
selector: '[custom-element-name]' 
}) 

사용법 :<div app-servers></div>

3. 클래스 선택기 :

@Component({ 
selector: '.custom-element-name' 
}) 

사용법 :<div class="app-servers"></div>

참고 : 각도이 ID와 pseud을 지원하지 않습니다 o 선택자