Angular로 트리구조 표현하기

만드는 이유

조직도를 표현하기 위해서 만들게 됐다.

앞에서 작성한 서버에 API 요청을 해서 자료를 받아온다. 다음과 같은 자료가 들어온다.

계층형으로 들어오는 조직도 json

구현

Organize-Map 컴포넌트

• 조직도 전체가 나타나게 될 컴포넌트다.
• 최초의 루트 Organize를 포함한다.

<app-organize-card [organize]="organize"></app-organize-card>

export class OrganizeMapComponent {

  auth : Auth =  {} as Auth
  organize : Organize = {} as Organize

  constructor(private authService: AuthService, private companyService: CompanyService) {
    this.auth = this.authService.getAuth()
    this.companyService.getCompanyOrganizes(this.auth.company_id).then((organizes) => {
      this.organize = organizes
      console.log(this.organize)
    })
  }
}

• api통신을 하는 서비스를 이용한다.

Organize-Card 컴포넌트

• 자식 Organize들을 for문으로 반복하여 포함한다.

<nz-card [nzBordered]="false" [nzTitle]="organize.organize_name">
    <app-member-list [members]="organize.members"></app-member-list>
    <div class="organize-children">
        @for (child of organize.children; track child){
            <app-organize-card [organize]="child"></app-organize-card>
        }
    </div>
</nz-card>

export class OrganizeCardComponent {
  @Input() organize: Organize = {} as Organize;
}

• 별다른 기능이 없다면, 위에서 받은 organize에 대한 정보만 가지고 있으면 된다.

결과

• 다음과 같이 계층형으로 component들이 표현된다.앵귤러 조직도