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

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

이 질문에는 이미 다음과 같은 답이 있습니다.

각 구성 요소로 생성된 호스트 HTML 요소 선택기 제거 (5개 답변)

마감됨7년 전에.

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

아래 코드로 구성 요소를 생성하는 경우:

유형 스크립트:

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>각 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는 camelCase 속성과 잘 작동하며 모든 지시어와 함께 사용합니다.*ngFor,ngModel...), 각도 스타일 가이드에서도 제안합니다.

Angular 1 to Angular 2 업그레이드 전략 문서 인용하기

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

실제로 원하는 작업에 따라 다르며 Angular2는 다음과 같은 여러 가지를 지원합니다.

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

원하는 작업에 따라 다양한 접근 방식을 선택할 수 있습니다.간단한 샘플은 @Gunter 솔루션이 더 좋은 것 같습니다 ;-)

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