Angular 는 블 로그 댓 글 과 유사 한 재 귀적 디 스 플레이 를 실현 하고 댓 글 에 대한 데 이 터 를 얻 습 니 다.

머리말
우 리 는 일부 기술 블 로그 에서 재 귀 댓 글 을 자주 볼 수 있다.즉,우 리 는 블 로 거들 의 댓 글 에 답 할 수 있 고 화면 이 아름 답 고 경사 가 있 는 디 스 플레이 형식 을 볼 수 있다.며칠 전에 여가 시간 에 비슷 한 demo 를 썼 기 때문에 기록 하면 필요 한 사람 에 게 참고 역할 을 할 수 있다.
자,잔말 말고 본론 으로...
사고의 방향
우 리 는 백 엔 드 프로그램 을 쓸 때 비슷 한 트 리 를 만 드 는 이런 데이터 구 조 를 자주 만 날 수 있다.우 리 는 재 귀적 인 방법 으로 이 루어 지 는 것 을 직감 했다.처음에 나 도 이렇게 생각 했다.바로 Angular 4 의 재 귀적 인 방법 을 써 서 문자열 을 구성 한 다음 에 인터페이스 에 다음 코드 와 유사 하 다 는 것 을 보 여 주 었 다.

@Component({
 selector: "comment",
 template: '{{ comments }}'
})
export class CommentComponent {

 public comments: string = "";

 generateComment(Comment comment) {
 this.comments = this.comments + "<div>" + comment.content + "</div>";
 if (comment.pComment != null) {
  generateComment(comment.pComment);
 }
 }
}
정말 괜 찮 은 줄 알 았 는데 한번 해 보 니 태그 가 해석 되 지 않 고 이미 태 그 를 해석 하 는 과정 이 지 났 다 는 생각 이 들 었 어 요...........................................
나중에 생각 했 습 니 다.현재 의 전단 프레임 워 크 는 모두 구성 요소 화 라 고 자칭 합 니 다.Angular 4 도 예외 가 아 닙 니 다.그러면 하나의 Component 는 모든 Component 를 삽입 할 수 있 습 니 다.그러면 자신 을 삽입 할 수 있 고 재 귀 와 유사 한 개념 이 생 겼 습 니 다.이것 을 생각 하고 바로 해 보 세 요.
구체 적 실현
생각 은 이 렇 습 니 다.저 는 데이터 의 형식 을 정 의 했 습 니 다.모든 댓 글 아래 에 하위 댓 글 배열 이 있 는 것 이지 모든 댓 글 에 부모 댓 글 이 있 는 것 이 아 닙 니 다.데이터 형식 은 다음 과 같 습 니 다.

"comments": 
  [
  {
   "id": 1,
   "username": "James1",
   "time": "2017-07-09 21:02:21",
   "content": "   1<h1>   </h1>",
   "status": 1,
   "email": "[email protected]",
   "cComments": [
    {
    "id": 2,
    "username": "James2",
    "time": "2017-07-09 21:02:22",
    "content": "   2",
    "status": 1,
    "email": "[email protected]",
    "cComments": null
   }
   ]
  }
  ]
CommentComponent 구성 요 소 는 댓 글 모듈 을 실 현 했 지만 재 귀적 댓 글 은 이 구성 요소 에서 이 루어 지지 않 고 하위 구성 요소 CommentView Component 에서 이 루어 집 니 다.CommentComponent 에는 댓 글 을 입력 하 는 텍스트 상자 도 포함 되 어 있 기 때 문 입 니 다.
리 뷰 총 모듈 ComponentComponent 코드:
comment.component.ts

@Component({
 selector: 'comment',
 templateUrl: './comment.component.html',
 styleUrls: ['./comment.component.css']
})
export class CommentComponent implements OnInit {

 @Input()
 public comments: Comment[];

 ngOnInit(): void {
 }
}
comment.component.html

<div class="container font-small">
 <div class="row">
 <div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">

  <comment-view [comments]="comments"></comment-view>

  <div class="well" id="comment">
  <h4>{{ 'comment.leaveComment' | translate }}</h4>
  <form role="form">
   <div class="form-group">
   <input type="hidden" [(ngModel)]="id" name="id">
   <textarea [(ngModel)]="content" name="content" class="form-control" rows="5"></textarea>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
  </form>
  </div>
 </div>
 </div>
</div>
comment.component.css

.media {
 font-size: 14px;
}

.media-object {
 padding-left: 10px;
}
하위 모듈 ComponentViewComponent 코드:
component-view.component.ts

@Component({
 selector: 'comment-view',
 templateUrl: './comment-view.component.html',
 styleUrls: ['./comment-view.component.css']
})
export class CommentViewComponent implements OnInit {
 @Input()
 public comments: Comment[];

 constructor(private router: Router,
    private activateRoute: ActivatedRoute ) {
 }

 ngOnInit(): void {
 }
}
component-view.component.html

<div *ngFor="let comment of comments">
 <div class="media">
 <div class="pull-left">
  <span class="media-object"></span>
 </div>
 <div class="media-body">
  <h4 class="media-heading">{{ comment.username }}
  <small class="pull-right">{{ comment.time }}&nbsp;|&nbsp;<a href="#" rel="external nofollow" >{{ 'comment.reply' | translate }}</a></small>
  </h4>
  {{ comment.content }}
  <hr>
  <comment-view *ngIf="comment.cComments != null" [comments]="comment.cComments"></comment-view>
 </div>
 </div>
</div>
comonent-view.component.css

.media {
 font-size: 14px;
}

.media-object {
 padding-left: 10px;
}
결실
이 때의 전시 결 과 는 다음 그림 과 같다.

위 에 서 는 댓 글 의 사다리꼴 디 스 플레이 를 어떻게 실현 하 는 지 설명 할 뿐 블 로그 댓 글 에서 우 리 는 어떤 댓 글 에 답장 할 수 있 는 지 자주 볼 수 있다.본 고 는 어떤 댓 글 의 답장 단 추 를 클릭 한 후에 이 댓 글 의 내용 을 얻 고 입력 상자 에 표시 하 는 방법 을 설명 한다.CSDN 블 로그 댓 글 처럼 댓 글 을 클릭 하면 입력 상자 에[reply]u011642663[/reply]이 자동 으로 추 가 됩 니 다.
사고의 방향
지난 글 의 댓 글 사다리꼴 에 따 르 면 우 리 는 클릭 하여 답장 을 한 후에 화면 이 자동 으로 입력 상자 위치 에 도착 하고 클릭 하여 답장 하 는 댓 글 의 정 보 를 얻 었 다.먼저 이 기능 점 을 분해 하고 프로젝트 에서 도 우 리 는 기능 점 을 자주 분해 합 니 다.이 기능 점 은 두 가지 작은 점 이 있 습 니 다.하 나 는 모든 댓 글 에[답장]단 추 를 추가 하고 답장 을 클릭 한 후에 입력 상자 위치 로 뛰 어 내 리 는 것 입 니 다.둘째,답장 을 클릭 하면 답장 을 클릭 한 댓 글 의 정 보 를 얻 을 수 있다.다음은 우리 가 일일이 해결 하 자.
입력 상자 로 이동
우리 가 앞의 첫 번 째 언어 를 접 하 는 것 은 바로 HTML 입 니 다.우 리 는 HTML 에\#포 지 셔 닝 이 있다 는 것 을 알 고 있 습 니 다.아래 코드 는 간단하게 설명 하 겠 습 니 다.
이 HTML 코드 파일 이 index.html 라 고 가정 합 니 다.

<html>
 <head>
 </head>
 <body>
 <a href="index.html#pointer" rel="external nofollow" >Click me to pointer</a>
 <div id="pointer">
  <h1>    </h1>
 </div>
 </body>
</html>
위의 코드 는 Click me to pointer 라 는 링크 를 클릭 하면 페이지 가 id="pointer"라 는 div 위치 로 이동 합 니 다.그래서 우 리 는 이 클릭 으로 답장 을 하고 입력 상자 로 넘 어가 면 이 방법 을 사용 할 수 있 습 니 다.
comment-component.html 에 댓 글 입력 상 자 를 id="comment"에 추가 합 니 다.다음은 경로 연결 문제 입 니 다.Angular Router 의 url 을 통 해 이 페이지 의 경 로 를 얻 은 다음 이 경로 뒤에\#comment 를 추가 하면 점프 를 실현 할 수 있 습 니 다.다음은 이 점프 기능 을 실현 하 는 코드 입 니 다.
id="comment"추가
comment-component.html

<!-- Comment -->
<div class="container font-small">
 <div class="row">
 <div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">

  <comment-view [comments]="comments" (contentEvent)="getReplyComment($event)" ></comment-view>

  <div class="well" id="comment">
  <h4>{{ 'comment.leaveComment' | translate }}</h4>
  <form role="form">
   <div class="form-group">
   <input type="hidden" [(ngModel)]="id" name="id">
   <textarea [(ngModel)]="content" name="content" class="form-control" rows="5"></textarea>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
  </form>
  </div>
 </div>
 </div>
</div>
경로 로 현재 페이지 URL 가 져 오기 추가
comment-view.component.ts

@Component({
 selector: 'comment-view',
 templateUrl: './comment-view.component.html',
 styleUrls: ['./comment-view.component.css']
})
export class CommentViewComponent implements OnInit {
 @Input()
 public comments: Comment[];

 //            url  
 public url: string = "";

 constructor(private router: Router,
    private activateRoute: ActivatedRoute ) {
 }

 ngOnInit(): void {
 this.url = this.router.url;
 this.url = this.url.split("#")[0];
 this.url = this.url + "#comment";
 }
}
링크 추가 href="
comment-view.component.html

<div *ngFor="let comment of comments">
 <div class="media">
 <div class="pull-left">
  <span class="media-object"></span>
 </div>
 <div class="media-body">
  <h4 class="media-heading">{{ comment.username }}
  <small class="pull-right">{{ comment.time }}&nbsp;|&nbsp;<a href="{{url}}" rel="external nofollow" rel="external nofollow" (click)="reply(comment)" >{{ 'comment.reply' | translate }}</a></small>
  </h4>
  {{ comment.content }}
  <hr>
  <comment-view *ngIf="comment.cComments != null" [comments]="comment.cComments" (contentEvent)="transferToParent($event)"></comment-view>
 </div>
 </div>
</div>
이 는 페이지 전환 의 기능 점 을 실현 하고 그 다음 에 답장 을 받 는 댓 글 의 정 보 를 실현 한다.
댓 글 정보 가 져 오기
댓 글 정 보 를 받 는 게 쉽 지 않 을까요?클릭 이벤트 추가 하면 되 잖 아.지난 글 에서 우리 가 어떻게 사다리꼴 전시 평론 을 실 현 했 는 지 기억 하 십 니까?우 리 는 재 귀 를 통 해 이 루어 집 니 다.click 이 벤트 를 어떻게 추가 하여 몇 층 이 박 혀 있 는 구성 요소 가 부모 구성 요소 에 댓 글 정 보 를 전달 할 수 있 습 니까?우선 구체 적 으로 어떻게 실현 하고 싶 지 않 습 니 다.우리 의 이 생각 이 옳 습 니까?하위 구성 요소 의 정 보 를 부모 구성 요소 에 전달 합 니까?답 은 긍정 적 입 니 다.몇 층 이 박 혀 있 든 하위 구성 요소 의 정 보 를 comment.coponent.ts 라 는 댓 글 모듈 의 메 인 구성 요소 에 전달 하 는 것 입 니 다.
Angular 는 하위 구성 요소 가 부모 구성 요소 에 정 보 를 전달 하 는 것 을 실현 하기 위해@Output 을 제공 합 니 다.comment-view.coponent.ts 모듈 에@Output 을 추가 하여 모든 부모 구성 요소 에 정 보 를 전달 합 니 다.우 리 는 끼 워 넣 었 습 니 다.이렇게 한 층 한 층 씩 전달 합 니 다.comment-coponent.ts 구성 요소 에 전 달 될 때 까지.코드 가 어떻게 실현 되 는 지 봅 시다.
구현 코드
comment-view.component.ts

@Component({
 selector: 'comment-view',
 templateUrl: './comment-view.component.html',
 styleUrls: ['./comment-view.component.css']
})
export class CommentViewComponent implements OnInit {
 @Input()
 public comments: Comment[];
 //          
 @Output()
 public contentEvent: EventEmitter<Comment> = new EventEmitter<Comment>();
 //            url  
 public url: string = "";

 constructor(private router: Router,
    private activateRoute: ActivatedRoute ) {
 }

 ngOnInit(): void {
 this.url = this.router.url;
 this.url = this.url.split("#")[0];
 this.url = this.url + "#comment";
 }

 reply(comment: Comment) {
 this.contentEvent.emit(comment);
 }

 transferToParent(event) {
 this.contentEvent.emit(event);
 }
}
comment-view.component.html

<div *ngFor="let comment of comments">
 <div class="media">
 <div class="pull-left">
  <span class="media-object"></span>
 </div>
 <div class="media-body">
  <h4 class="media-heading">{{ comment.username }}
  <small class="pull-right">{{ comment.time }}&nbsp;|&nbsp;<a href="{{url}}" rel="external nofollow" rel="external nofollow" (click)="reply(comment)" >{{ 'comment.reply' | translate }}</a></small>
  </h4>
  {{ comment.content }}
  <hr>
  <comment-view *ngIf="comment.cComments != null" [comments]="comment.cComments" (contentEvent)="transferToParent($event)"></comment-view>
 </div>
 </div>
</div>
comment.component.ts

@Component({
 selector: 'comment',
 templateUrl: './comment.component.html',
 styleUrls: ['./comment.component.css']
})
export class CommentComponent implements OnInit {

 @Input()
 public comments: Comment[];

 //       
 public replyComment: Comment = new Comment();

 public id: number = 0;
 public content: string = "";

 ngOnInit(): void {
 }

 getReplyComment(event) {
 this.replyComment = event;
 this.id = this.replyComment.id;
 this.content = "[reply]" + this.replyComment.username + "[reply]
"; } }
comment.component.html

<!-- Comment -->
<div class="container font-small">
 <div class="row">
 <div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">

  <comment-view [comments]="comments" (contentEvent)="getReplyComment($event)" ></comment-view>

  <div class="well" id="comment">
  <h4>{{ 'comment.leaveComment' | translate }}</h4>
  <form role="form">
   <div class="form-group">
   <input type="hidden" [(ngModel)]="id" name="id">
   <textarea [(ngModel)]="content" name="content" class="form-control" rows="5"></textarea>
   </div>
   <button type="submit" class="btn btn-primary">Submit</button>
  </form>
  </div>
 </div>
 </div>
</div>
코드 논리 설명:
우 리 는 comment-view.coponent.ts 에 다음 과 같은 몇 가 지 를 추가 합 니 다.
  • @Output()contentEvent
  • 를 정 의 했 습 니 다.
  • reply(comment:Comment)이벤트 가 답장 을 클릭 할 때 촉발 되 며,촉발 할 때 contentEvent 는 comment 를 부모 모듈
  • 에 전달 합 니 다.
  • transferToParent(event)를 추가 하 는 것 은 하위 구성 요 소 를 받 아들 이 는 이벤트 이 며,부모 구성 요소
  • 에 이 벤트 를 계속 전달 합 니 다.
    comment.coponent.ts 에서 getReply Comment(event)방법 을 정 의 했 습 니 다.이 방법 은 하위 구성 요소 가 전달 하 는 댓 글 정 보 를 받 고 페이지 에 정 보 를 표시 합 니 다.큰 성 과 를 거두다.
    효과 도

    총결산
    이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.

    좋은 웹페이지 즐겨찾기