routerLink use in shared component

shared.html

[routerLink]="['/tags',tagtext]

|---this is variable

shared.module

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

imports: [

CommonModule,

RouterModule

],

ng-bootstrap NgbCarousel *ngfor and Methods

    Angular: 4.3.0

    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28",

    "bootstrap": "^4.0.0-alpha.6"

0、API from (https://ng-bootstrap.github.io/#/components/carousel/api)

Methods

select	Signature: select(slideId: string) Return type: void Navigate to a slide with the specified identifier.
prev	Signature: prev() Return type: void Navigate to the next slide.
next	Signature: next() Return type: void Navigate to the next slide.
pause	Signature: pause() Return type: void Stops the carousel from cycling through items.
cycle	Signature: cycle() Return type: void Restarts cycling through the carousel slides from left to right.

1、how to use Methods

1.1 basic code from (https://ng-bootstrap.github.io/#/components/carousel/examples)

test.html

<ngb-carousel>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=1" alt="Random first slide">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=2" alt="Random second slide">
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=3" alt="Random third slide">
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</ngb-carousel>

1.2 give id to  carousel

test.html

<ngb-carousel #ngbCarouselid="ngbCarousel">
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=1" alt="Random first slide">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=2" alt="Random second slide">
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=3" alt="Random third slide">
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</ngb-carousel>

1.3 then can use some Methods

test.html

<button type="button" (click)="ngbCarouselid.prev()" class="btn btn-warning">

prev</button>

<button type="button" (click)="ngbCarouselid.next()" class="btn btn-success">

next</button>

<button type="button" (click)="ngbCarouselid.pause()" class="btn btn-warning">

pause</button><--it seems doesn't work. see

https://github.com/ng-bootstrap/ng-bootstrap/issues/1560

<button type="button" (click)="ngbCarouselid.cycle()" class="btn btn-success">

cycle</button>

1.4 use "select" methods need to give ngbSlide "id"

test.html

<ngb-carousel #ngbCarouselid="ngbCarousel">
  <ng-template ngbSlide id="myfirstSlide">
    <img src="https://lorempixel.com/900/500?r=1" alt="Random first slide">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide id="mysecondSlide">
    <img src="https://lorempixel.com/900/500?r=2" alt="Random second slide">
    <div class="carousel-caption">
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide id="mythirdSlide">
    <img src="https://lorempixel.com/900/500?r=3" alt="Random third slide">
    <div class="carousel-caption">
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</ngb-carousel>

1.5 then you can use "select" like

<button type="button" (click)="ngbCarouselid.select('myfirstSlide')" class="btn btn-warning"> first</button>

<button type="button" (click)="ngbCarouselid.select('mysecondSlide')"

class="btn btn-success">second</button>

<button type="button" (click)="ngbCarouselid.select('mythirdSlide')"

class="btn btn-warning"> third</button>

1.6 fix "pause" => interval=0

<ngb-carousel #ngbCarouselid="ngbCarousel" [interval]="0">

2.0 how to use *ngfor

from https://github.com/ng-bootstrap/ng-bootstrap/issues/1397

test.ts

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html'
})

export class CasereportComponent implements OnInit {
slides = [
{
id: 'slide-1',
img: {
url: 'http://lorempixel.com/900/500?r=1',
title: 'Random first slide'
},
description: {
title: 'First slide label',
detail: 'Nulla vitae elit libero, a pharetra augue mollis interdum.'
}
},
{
id: 'slide-2',
img: {
url: 'http://lorempixel.com/900/500?r=2',
title: 'Random second slide'
},
description: {
title: 'Second slide label',
detail: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
}
},
{
id: 'slide-3',
img: {
url: 'http://lorempixel.com/900/500?r=3',
title: 'Random third slide'
},
description: {
title: 'Third slide label',
detail: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.'
}
}
];
constructor() { }
ngOnInit() {
}
}

test.html

<ngb-carousel>

<ng-template ngbSlide *ngFor="let slide of slides" [id]="slide.id">

<img [src]="slide.img.url" [alt]="slide.img.title">

<div class="carousel-caption">

<h3>{{slide.description.title}}</h3>

<p>{{slide.description.detail}}</p>

</div>

</ng-template>

</ngb-carousel>

3.0 how to use output?

Outputs

slide

A carousel slide event fired when the slide transition is completed. See NgbSlideEvent for payload detail

Bootstrap "row"类宽度超出问题

加個 <div class="container-fluid">即可消除，<div class="container">會讓左右留空，看設計者需求吧~

安裝notepadqq(linux上的notepad++)在Ubuntu

安裝notepadqq(linux上的notepad++)

第一部分install qt  (https://wiki.qt.io/Install_Qt_5_on_Ubuntu)

1.

wget http://download.qt.io/official_releases/qt/5.7/5.7.0/qt-opensource-linux-x64-5.7.0.run

2.

chmod +x qt-opensource-linux-x64-5.7.0.run

./qt-opensource-linux-x64-5.7.0.run

3.

sudo apt-get install build-essential

4.

sudo apt-get install libfontconfig1

5.

sudo apt-get install mesa-common-dev

6.

sudo apt-get install libglu1-mesa-dev -y

第二部分 install notepadqq (https://github.com/notepadqq/notepadqq)

7.

sudo add-apt-repository ppa:notepadqq-team/notepadqq

8.

sudo apt-get update

9.

sudo apt-get install notepadqq

在Google Cloud Platform架設workerman使用Ubuntu16.04 X64、php7.0、

已安裝php7.0後

1、命令行运行apt-get install php-cli git gcc php-pear php-dev libevent-dev

2、pecl install event

3、命令行运行(需要切换到root用户)echo extension=event.so > /etc/php/7.0/cli/conf.d/event.ini

4、(cd 到你放網頁的地方，我是/var/www/html)

命令行运行git clone https://github.com/walkor/Workerman

5、nano http_test.php

<?php

use Workerman\Worker;

require_once './Workerman/Autoloader.php';

// 创建一个Worker监听2345端口，使用http协议通讯

$http_worker = new Worker("http://0.0.0.0:2345");

// 启动4个进程对外提供服务

$http_worker->count = 4;

// 接收到浏览器发送的数据时回复hello world给浏览器

$http_worker->onMessage = function($connection, $data)

{

    // 向浏览器发送hello world

    $connection->send('hello world');

};

// 运行worker

Worker::runAll();

?>

6、到產品與服務(左上角Google Cloud Platform 旁那三槓)->網路->防火牆規則

 ->建立防火牆規則

(看這: http://www.jerrynest.com/tutorial-google-compute-engine-server/)

7、開啟內部防火牆:sudo ufw allow 2345

8、開啟測試php http_test.php start

9、瀏覽器 http://你的ip:2345