angular + rxjs（一）环境+组件

安装angular/cli

npm install -g @angular/cli

查看安装版本

ng v

angular/cli

创建新项目

ng new my-angular-app

等待几分钟创建工程

工程生成的目录

创建工程

创建新的proxy.config.json配置代理

proxy.config.json

{
    "/api": {
       "target": "http://localhost:3000"
    }
 }

跳转到工程目录，启动

cd my-angular-app
ng serve -o //启动后打开窗口

启动成功
页面

然后尝试写自己的组件
先安装一个UI组件（此处选用ngx-bootstrap）

npm install ngx-bootstrap --save

安装bootstrap

npm install bootstrap --save

在angular.json中配置css样式

"styles": [
       "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.css"
 ],

在app.component.ts中设置主题

import { Component } from '@angular/core';
import { setTheme } from 'ngx-bootstrap/utils';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-angular-app';
  constructor() {
    setTheme('bs3') //或者bs4;
  }
}

创建accordion.component.html

<accordion>
    <accordion-group heading="Tab 1">
      Tab 1 details.
    </accordion-group>
    <accordion-group heading="Tab 2">
      <p>Tab 2 details.</p>
    </accordion-group>
    <accordion-group heading="Tab 3">
      <p>Tab 3 details.</p>
    </accordion-group>
    <accordion-group heading="Tab 4">
      <p>Tab 4 details.</p>
    </accordion-group>
  </accordion>

创建accordion.component.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'demo-accordion-basic',
  templateUrl: './accordion.component.html'
})
export class AccordionBasicComponent {}

在app.modules.ts中引入AccordionModule和AccordionBasicComponent

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AccordionBasicComponent } from "./accordion.component";

@NgModule({
  declarations: [
    AppComponent,
    AccordionBasicComponent
  ],
  imports: [
    AccordionModule.forRoot(),
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在app.component.html中创建标签

<demo-accordion-basic></demo-accordion-basic>

页面输出

accordion