Angular의 구성요소/서비스에 대한 간략한 토론

이 글에서는 Angular의 구성요소/서비스를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular Component 정보

css 스타일 범위, Shadow DOM

Shadow DOM은 개발자가 자신의 HTML 마크업, CSS 스타일 및 JavaScript를 캡슐화할 수 있도록 하는 HTML 사양의 일부입니다. 스타일 구성 요소를 생성할 때 설정을 통해 활성화할 수 있습니다. [관련 튜토리얼 권장사항: "angular Tutorial"]

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello World!</h1>
    <span class="red">Shadow DOM Rocks!</span>
  `,
  styles: [`
    :host {
      display: block;
      border: 1px solid black;
    }
    h1 {
      color: blue;
    }
    .red {
      background-color: red;
    }
  `],
  encapsulation: ViewEncapsulation.ShadowDom
})
class MyApp {
}

ViewEncapsulation 선택값:

• ViewEncapsulation.Emulated - Angular에서 제공하는 스타일 패키징 메커니즘을 통해 컴포넌트를 캡슐화하여 컴포넌트의 스타일이 외부 영향에 영향을 받지 않도록 합니다. . 이는 Angular의 기본 설정입니다.
• ViewEncapsulation.Native - 기본 Shadow DOM 기능을 사용합니다. 하지만 브라우저가 이를 지원하는지 여부를 고려해야 합니다.
• ViewEncapsulation.None - Shadow DOM이 없고 스타일 패키징이 없습니다

Angular Service 정보

Service(서비스)는 데이터 액세스 및 논리적 처리 기능을 수행합니다. 모듈성과 재사용성을 향상시키기 위해 구성 요소와 서비스를 분리합니다.

싱글톤 서비스(싱글톤)

• Angular CLI를 사용하여 서비스를 생성하면 기본적으로 싱글톤 서비스가 생성됩니다.
• @Injectable()의 제공된In 속성을 싱글톤인 루트로 선언합니다. 서비스.
• 싱글턴 서비스(싱글톤) 개체를 사용하여 전역 변수를 임시로 저장할 수 있습니다. 복잡한 전역 변수의 경우 상태 관리 컴포넌트(상태 관리 - Ngrx)를 사용하는 것이 좋습니다.

forRoot() 패턴

여러 호출 모듈이 동시에 공급자(서비스)를 정의하는 경우 이 모듈이 여러 기능 모듈에 로드되면 이러한 서비스가 여러 위치에 등록됩니다. 이로 인해 서비스의 여러 인스턴스가 생성되고 서비스는 더 이상 싱글톤처럼 동작하지 않습니다. 이를 방지하는 방법에는 여러 가지가 있습니다.

• 모듈에 서비스를 등록하는 대신 제공된 구문을 사용하세요.
• 서비스를 자체 모듈로 분리하세요.
• 모듈에서 각각 forRoot() 및 forChild() 메서드를 정의합니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 Angular의 구성요소/서비스에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!