angular-material-app documentation
  1. Components
  2. BlogComponent

File

src/app/pages/blog/blog.component.ts

Implements

OnInit

Metadata

selector app-blog
styleUrls ./blog.component.scss
templateUrl ./blog.component.html

Index

Properties
Methods

Constructor

constructor(service: BlogService)
Defined in src/app/pages/blog/blog.component.ts:13
Parameters :
Name Type Optional
service BlogService No

Methods

ngOnInit
ngOnInit()
Defined in src/app/pages/blog/blog.component.ts:18
Returns : void

Properties

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;
  //   });
  // }
}
Copy
<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>
Copy

./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);
    }
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""