src/app/pages/blog/blog.component.ts
| selector | app-blog |
| styleUrls | ./blog.component.scss |
| templateUrl | ./blog.component.html |
Properties |
Methods |
constructor(service: BlogService)
|
||||||
|
Defined in src/app/pages/blog/blog.component.ts:13
|
||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/pages/blog/blog.component.ts:18
|
|
Returns :
void
|
| items |
Type : any
|
Default value : []
|
|
Defined in src/app/pages/blog/blog.component.ts:13
|
import { Component, OnInit } from '@angular/core';
// rest
// import { BlogService } from './blog.service';
// graphql
import { BlogService } from './blog.grahql';
@Component({
selector: 'app-blog',
templateUrl: './blog.component.html',
styleUrls: ['./blog.component.scss']
})
export class BlogComponent implements OnInit {
items: any = [];
constructor(private service: BlogService) {}
// graphql
ngOnInit() {
this.service.getIssues().subscribe(items => {
this.items = items.issues.edges.map(item => {
return {
title: item.node.title,
body: item.node.body,
updated: item.node.updatedAt
};
});
});
}
// rest
// ngOnInit() {
// this.service.getIssues().subscribe(items => {
// this.items = items;
// });
// }
}
<div class="header" fxLayout="column" fxLayoutAlign="center start">
<h1>Stbui's Blog</h1>
<h5 class="header-desc">学习弯道超车的技巧！</h5>
<stbui-github-button type="link|star|fork"></stbui-github-button>
</div>
<div *ngIf="!items.length">
<stbui-loading-skeleton></stbui-loading-skeleton>
<stbui-loading-skeleton></stbui-loading-skeleton>
<stbui-loading-skeleton></stbui-loading-skeleton>
</div>
<mat-card *ngFor="let item of items">
<div class="timer">{{ items.updated }}</div>
<mat-card-title>
<a class="title" href="/pages/blog/1" target="blank">{{ item.title }}</a>
</mat-card-title>
<mat-card-content>
<pre><code>{{item.body}}</code></pre>
<button mat-button color="primary">阅读全文...</button>
</mat-card-content>
</mat-card>
<stbui-pagination total="5" align="center"></stbui-pagination>
./blog.component.scss
:host {
display: block;
}
mat-card {
margin: 20px;
}
.header {
position: relative;
z-index: 1;
height: 200px;
background: linear-gradient(0, #3f51b5, #3f51b5);
background: linear-gradient(90deg, #23a9f5 0, #3f51b5);
color: #fff;
padding: 20px;
h1,
h5 {
margin: 0;
}
&-desc {
padding-top: 12px;
padding-bottom: 12px;
font-weight: 300;
color: #f9f9f9;
}
}
.timer {
margin: 0 0 10px;
line-height: 14px;
font-size: 13px;
font-weight: bold;
color: #727272;
overflow: hidden;
}
.title {
color: #3f51b5;
position: relative;
display: inline-block;
text-decoration: none;
&::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #3f51b5;
visibility: hidden;
transform: scaleX(0);
transition: 0.4s ease-in-out;
}
&:hover {
text-decoration: none;
&::after {
visibility: visible;
transform: scaleX(1);
}
}
}