HTML에서 구성 요소의 선택기 태그 제거 /

HTML에서 구성 요소의 선택기 태그 제거 /

---

이 질문에 이미 답변이 있습니다.

• 각도 구성 요소 5 답변으로 만든 호스트 HTML 요소 선택기를 제거하십시오.

Angular 2 (버전 2.0.0-alpha.46)를 시작하고 몇 가지 구성 요소를 만듭니다.

아래 코드로 구성 요소를 생성 할 때 :

Typescript :

import {ComponentMetadata as Component, ViewMetadata as View} from 'angular2/angular2';

@Component({
   selector: 'my-component'
})

@View({
     template: '<div class="myClass">Hello My component</div>'
 })

export class MyCompoent{
    constructor() {
        console.info('My Component Mounted Successfully');
    }
}

HTML :

<my-component></my-component>

잘 작동하지만 수행 Inspect element하면 다음과 같이 생성 된 태그를 볼 수 있습니다.

HTML 출력

<my-component>
    <div>Hello My component</div>
<my-component>

문제

<my-component>HTML 에서 태그를 유지 하고 일부 CSS가 예상대로 작동하지 않습니다.

질문

<my-component>angular 1 ( replace: true지시문에서) 과잉 태그 를 제거하는 방법이 있습니까?

---

교체는 좋은 생각이 아닌 것 같았 기 때문에 https://github.com/angular/angular/issues/3866 에 따라 AngularJS 1.x에서 더 이상 사용되지 않았습니다 .

해결 방법으로 다음과 같은 구성 요소에서 속성을 선택할 수 있습니다.

selector: '[my-component]'

selector: '[myComponent]'

다음과 같이 사용하십시오.

<div my-component>Hello My component</div>

<div myComponent>Hello My component</div>

힌트

지시어 선택자는 snake-case 대신 camelCase 택합니다. Snake-case는 -사용자 지정 요소에 필요 요소 선택기에만 사용 됩니다. Angular는 구성 요소가 사용자 지정 요소에 의존하지 않지만 어쨌든이 규칙을 준수하는 것이 좋습니다. 모든 지침에 낙타 표기법의 특성과 용도를 가진 각 작품의 벌금 ( *ngFor, ngModel, ...), 또한 각도 스타일 가이드에 의해 제안된다.

---

Angular 1에서 Angular 2로 업그레이드 전략 문서 를 인용 비용 :

호스트 요소를 대체하는 지시문 (Angular 1의 true 지시문)은 Angular 2에서 지원되지 않습니다. 대부분의 경우 이러한 지시문을 일반 구성 요소 지시문으로 업그레이드 할 수 있습니다.

사실, 그것은 당신이하고 싶은 일에 달려 있으며 Angular2가 여러 가지를 지원한다는 것을 알아야합니다.

• 속성 지시문-https ://angular.io/guide/attribute-directives 참조
• 구조 지시문-https ://angular.io/guide/structural-directives 참조

수행하려는 작업에 따라 다른 접근 방식을 선택할 수 있습니다. 간단한 샘플의 경우 @ Günter 솔루션이 더 나은 것 같습니다 ;-)

참고 URL : https://stackoverflow.com/questions/34588933/remove-replace-a-components-selector-tag-from-html