Questions Management – Frontend – Xây dựng phần hiển thị nội dung của một question

Xem toàn bộ series bài viết hướng dẫn xây dựng ứng dụng Questions Management tại đây. Sau khi đã xây dựng xong phần hiển thị các câu hỏi, giờ là lúc chúng ta sẽ hiện thực chi tiết cho những phần còn thiếu trong trang này bao gồm: thêm mới một question, xem nội dung của một question, sửa và xoá một question. Điều đầu tiên mà mình sẽ làm là xây dựng trang hiển thị nội dung của một question các bạn nhé! Để hiển thị được thông tin của một question, chúng ta sẽ lấy thông tin của nó dựa vào id của chính nó nên đầu tiên, mình sẽ thêm mới một method trong class QuestionsService để thực hiện việc gọi API tìm question theo id của API Question Service như sau:

findQuestionById(id: String): Promise {
    return this.http.get("/question/" + id).toPromise();
}

findQuestionById(id: String): Promise {

return this.http.get("/question/" + id).toPromise();

}

Tiếp theo mình sẽ tạo mới một Component tên là QuestionComponent nằm trong thư mục src/app/questions/all_questions. Component này sẽ sử dụng phương thức findQuestionById() của class QuestionsService để tìm kiếm nội dung của question dựa vào id, được lấy từ đối tượng ActivatedRoute như sau:

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "../../../../node_modules/@angular/router";
import { QuestionsService, CompositeQuestion } from "../../services/questions.service";

@Component({
    selector: 'qm-body',
    templateUrl: './question.component.html'
})
export class QuestionComponent implements OnInit {

    compositeQuestion: CompositeQuestion;

    questionId: string;

    constructor(private route: ActivatedRoute, private questionsService: QuestionsService) {

    }

    ngOnInit(): void {
        this.questionId = this.route.snapshot.params['id'];

        this.questionsService.findQuestionById(this.questionId).then(r => {
            this.compositeQuestion = r;
        });
    }
}

import { Component, OnInit } from "@angular/core";

import { ActivatedRoute } from "../../../../node_modules/@angular/router";

import { QuestionsService, CompositeQuestion } from "../../services/questions.service";

@Component({

selector: 'qm-body',

templateUrl: './question.component.html'

})

export class QuestionComponent implements OnInit {

compositeQuestion: CompositeQuestion;

questionId: string;

constructor(private route: ActivatedRoute, private questionsService: QuestionsService) {

}

ngOnInit(): void {

this.questionId = this.route.snapshot.params['id'];

this.questionsService.findQuestionById(this.questionId).then(r => {

this.compositeQuestion = r;

});

}

với tập tin question.component.html có nội dung như sau:

<div id="page-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Question</h1>
        </div>
        <!-- /.col-lg-12 -->
    </div>

    <div>
        <div class="row">
            <div class="col-lg-12">
                <div class="form-group">
                    <label>Question</label>
                    <p class="form-control-static">{{ compositeQuestion.description }}</p>
                </div>
                <div class="form-group">
                    <label>Category</label>
                    <p class="form-control-static">{{ compositeQuestion.category.name }}</p>
                </div>
                <div class="form-group">
                    <label>Options</label>
                    <ul *ngFor="let option of compositeQuestion.options">
                        <li>
                            {{ option.description }} | 
                            <a href="#"> Edit</a> | 
                            <a href="#"> Delete</a>
                        </li>
                    </ul>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-success"><i class="fa fa-plus"></i> Add New Option</button>
                </div>
            </div>
            <!-- /.col-lg-12 -->
    </div>
    <!-- /.row -->
</div>

<h1 class="page-header">Question</h1>

</div>

</div>

<div>

<label>Question</label>

<p class="form-control-static">{{ compositeQuestion.description }}</p>

</div>

<label>Category</label>

<p class="form-control-static">{{ compositeQuestion.category.name }}</p>

</div>

<label>Options</label>

<li>

{{ option.description }} |

<a href="#"> Edit</a> |

<a href="#"> Delete</a>

</li>

</ul>

</div>

<button type="button" class="btn btn-success"><i class="fa fa-plus"></i> Add New Option</button>

</div>

</div>

</div>

Bây giờ chúng ta sẽ khai báo AllQuestionsComponent vào QuestionsModule:

import { NgModule } from "@angular/core";
import { CategoriesComponent } from "./categories/categories.component";
import { CommonModule } from "@angular/common";
import { FormsModule } from '@angular/forms';
import { AllQuestionsComponent } from "./all_questions/all_questions.component";
import { QuestionComponent } from "./all_questions/question.component";
import { AppRoutingModule } from "../app-routing.module";

@NgModule({
    declarations: [
        CategoriesComponent,
        AllQuestionsComponent,
        QuestionComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        AppRoutingModule
    ],
    exports: [
        CategoriesComponent,
        AllQuestionsComponent,
        QuestionComponent
    ]
})
export class QuestionsModule {

}

import { NgModule } from "@angular/core";

import { CategoriesComponent } from "./categories/categories.component";

import { CommonModule } from "@angular/common";

import { FormsModule } from '@angular/forms';

import { AllQuestionsComponent } from "./all_questions/all_questions.component";

import { QuestionComponent } from "./all_questions/question.component";

import { AppRoutingModule } from "../app-routing.module";

@NgModule({

declarations: [

CategoriesComponent,

AllQuestionsComponent,

QuestionComponent

imports: [

CommonModule,

FormsModule,

AppRoutingModule

exports: [

CategoriesComponent,

AllQuestionsComponent,

QuestionComponent

]

})

export class QuestionsModule {

}

Và khai báo Routing cho nó:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CategoriesComponent } from './questions/categories/categories.component';
import { AllQuestionsComponent } from './questions/all_questions/all_questions.component';
import { QuestionComponent } from './questions/all_questions/question.component';

const routes: Routes = [
    { path: '', component: DashboardComponent },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'categories', component: CategoriesComponent },
    { path: 'questions', component: AllQuestionsComponent },
    { path: 'question/:id', component: QuestionComponent },
    { path: '**', pathMatch: 'full', redirectTo: '/' }
]

@NgModule({
    imports: [
        RouterModule.forRoot(routes)  
    ],
    exports: [
        RouterModule
    ]
})
export class AppRoutingModule { }

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent } from './dashboard/dashboard.component';

import { CategoriesComponent } from './questions/categories/categories.component';

import { AllQuestionsComponent } from './questions/all_questions/all_questions.component';

import { QuestionComponent } from './questions/all_questions/question.component';

const routes: Routes = [

{ path: '', component: DashboardComponent },

{ path: 'dashboard', component: DashboardComponent },

{ path: 'categories', component: CategoriesComponent },

{ path: 'questions', component: AllQuestionsComponent },

{ path: 'question/:id', component: QuestionComponent },

{ path: '**', pathMatch: 'full', redirectTo: '/' }

]

@NgModule({

imports: [

RouterModule.forRoot(routes)

exports: [

RouterModule

]

})

export class AppRoutingModule { }

Bước cuối cùng chúng ta cần làm là sửa lại table hiển thị tất cả question trong tập tin all_questions.component.html, phần Actions, từ:

<button type="button" class="btn btn-primary btn-circle"><i class="fa fa-eye"></i></button> &nbsp;

1	<button type="button" class="btn btn-primary btn-circle"><i class="fa fa-eye"></i></button>

thành:

<a class="btn-primary btn-circle fa fa-eye" routerLink="/question/{{ c.id }}"> </a> &nbsp;

1	<a class="btn-primary btn-circle fa fa-eye" routerLink="/question/{{ c.id }}"> </a>

Đến đây thì chúng ta đã hoàn thành việc xây dựng phần hiển thị nội dung của một question. Bây giờ nếu các bạn chạy lại ứng dụng, đi đến trang “All Questions”:

Questions Management – Frontend – Xây dựng phần hiển thị nội dung của một question

Click vào biểu tượng đôi mắt trong bất kỳ dòng nào của bảng, các bạn sẽ thấy kết quả tương tự như sau:

Khanh Nguyen

Share this post

Questions Management – Frontend – Xây dựng phần hiển thị nội dung của một question

Add Comment Hủy

Khanh Nguyen

Share this post

You might also like...

Questions Management – Hiện thực Turbine Stream với RabbitMQ

Questions Management – Support Turbine Stream – Khởi tạo project support-turbine-stream sử dụng Spring Tool Suite

Questions Management – Support Monitor Dashboard – Hiện thực Hystrix Dashboard

Questions Management – Support Monitor Dashboard – Khởi tạo project support-monitor-dashboard sử dụng Spring Tool Suite

Add Comment Hủy