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
}
]
}
]리 뷰 총 모듈 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 {
}
}
<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>
.media {
font-size: 14px;
}
.media-object {
padding-left: 10px;
}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 {
}
}
<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 }} | <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>
.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>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>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";
}
}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 }} | <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);
}
}
<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 }} | <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>
@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 -->
<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 에 다음 과 같은 몇 가 지 를 추가 합 니 다.
comment.coponent.ts 에서 getReply Comment(event)방법 을 정 의 했 습 니 다.이 방법 은 하위 구성 요소 가 전달 하 는 댓 글 정 보 를 받 고 페이지 에 정 보 를 표시 합 니 다.큰 성 과 를 거두다.
효과 도
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Angular에서 타사 스크립트 및 CSS 작업Angular 방식으로 회로도가 있는 외부 라이브러리를 추가하거나 모듈을 가져옵니다. Angular.json은 Angular 프로젝트의 모든 설정 파일이며 표준 JavaScript 및 CSS 파일과 함께 타사 라이브...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
