一文带你入门angular（中）

news2024/12/25 9:01:58

一、angular中的dom操作原生和ViewChild两种方式以及css3动画

1.原生操作

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

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent {
  flag: boolean = true
  ngOnInit() {
    //在这个生命周期函数里面，组件和指令只是初始化完成，不是dom加载完毕
    var ownBox: any = document.getElementById("box")
    ownBox.style.color = "red"
    //所以dom元素上添加ngIf指令，控制台会报错
    var ownBox2: any = document.getElementById("box1")
    ownBox2.style.color = "blue"
  }
  ngAfterViewInit(): void {
    //在这个生命周期函数就可以，因为dom加载完毕，建议dom操作防止此处
    var ownBox2: any = document.getElementById("box1")
    ownBox2.style.color = "blue"
  }
}

<p>footer works!</p>
<div id="box">
  这是一个盒子
</div>

<div id="box1" *ngIf="flag">
  这是第2个盒子
</div>

2.ViewChild操作

//核心模块引入ViewChild
import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})

export class FooterComponent {
  //装饰器获取dom节点,此处相当于把box dom节点赋值给了Box
  @ViewChild("box") Box: any;
  constructor() { }
  ngAfterViewInit(): void {
    // nativeElement在this.Box打印出后显示的方法
    console.log(this.Box.nativeElement);
    // 这样也可以操作
    this.Box.nativeElement.style.color = "blue"
    this.Box.nativeElement.style.width = "100px"
    this.Box.nativeElement.style.height = "100px"
    this.Box.nativeElement.style.background = "orange"
    console.log(this.Box.nativeElement.innerHTML);//viewchild方法

  }
}

<p #box>viewchild方法</p>

3.父子组件中通过ViewChild调用子组件的方法

父组件header.component.ts：

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  //装饰器
  @ViewChild("child") Child: any
  ngAfterViewInit(): void {
    this.Child.children()
  }
  handle() {
    //调用子组件里面的方法
    this.Child.children()
  }
}

父组件header.component.html：

<p>我是header组件</p>
<app-footer #child></app-footer>
<button (click)="handle()">获取子组件里面的方法</button>

子组件footer.component.ts：

//核心模块引入ViewChild
import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})

export class FooterComponent {
  //装饰器获取dom节点,此处相当于把box dom节点赋值给了Box
  @ViewChild("box") Box: any;
  constructor() {
  }
  ngAfterViewInit(): void {
    // nativeElement在this.Box打印出后显示的方法
    console.log(this.Box.nativeElement);
    // 这样也可以操作
    this.Box.nativeElement.style.color = "blue"
    this.Box.nativeElement.style.width = "100px"
    this.Box.nativeElement.style.height = "100px"
    this.Box.nativeElement.style.background = "orange"
    console.log(this.Box.nativeElement.innerHTML);//viewchild方法

  }
  children() {
    console.log("我是子组件里的方法");
  }
}

4.css3动画

transition.component.html：

<div class="contain">
  内容区域
  <button (click)="show()">弹出侧边栏</button>
</div>
<aside id="aside">
  侧边栏区域
</aside>

transition.component.scss定义样式：

#aside {
  width: 200px;
  height: 100%;
  right: 0;
  top: 0;
  background-color: aqua;
  position: absolute;
  transform: translate(100%, 0);
  transition: all 2s;
}

然后在style.scss设置全局样式，解决导航条显现问题：

body {
  width: 100%;
  overflow-x: hidden;
}

transition.component.ts获取dom并操作：

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

@Component({
  selector: 'app-transition',
  templateUrl: './transition.component.html',
  styleUrls: ['./transition.component.scss']
})
export class TransitionComponent {
  ngAfterViewInit(): void {

  }
  show() {
    var aside1: any = document.getElementById("aside")
    aside1.style.transform = "translate(0,0)"
  }

}

二、父子之间通讯以及组件之间通讯

1.父组件给子组件@input

①子组件可以获取父组件的数据

②子组件可以执行父组件的方法

father.component.ts：

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

@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.scss']
})
export class FatherComponent {
  // 1.定义数据
  msg = "我是通讯信息"
  child() {
    alert("我是父组件的方法")
  }
}

father.component.html：

<p>我是父组件</p>
<hr>
<!-- 2.msg传值 child传方法  this传整个组件 -->
<app-child [msg]="msg" [child]="child" [every]="this"></app-child>

child.component.ts：

// 3.引入Input
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent {
  @Input() msg: any
  @Input() child: any
  @Input() every: any
  constructor() {
  }
  getFather() {
    this.child()
    console.log(this.every.msg);
  }
}

child.component.html：

<!-- 获取父组件信息 -->
<p>我是子组件--{{msg}}</p>
<button (click)="getFather()">执行父组件传过来的方法</button>

2.子组件给父组件传值@ViewChild

①父组件可以获取子组件的数据

②父组件可以获取子组件的方法

father.compoent.ts：


import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.scss']
})
export class FatherComponent {
  @ViewChild("child") child: any
  getChild() {
    this.child.child()
  }
}

father.compoent.html：

<p>我是父组件--{{child.msg}}</p>
<button (click)="getChild()">获取子组件里面的方法</button>
<hr>

<app-child #child></app-child>

child.compoent.ts：


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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent {
  // 定义数据
  msg = "我是子组件的msg"
  constructor() {
  }
  child() {
    alert("我是子组件的方法")
  }
}

child.compoent.html：

<p>我是子组件</p>

效果图：

 3.子组件通过@Output触发父组件的方法

child.component.ts：

// 1.引入Output,EventEmitter
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss']
})
export class ChildComponent {
  //2.new一个实例
  @Output() public outer = new EventEmitter()
  constructor() {
  }
  sendFather() {
    alert(1111)
    this.outer.emit("我是子组件的数据")
  }
}

child.component.html：

<p>我是子组件</p>
<button (click)="sendFather()">通过@Output触发父组件方法</button>

father.component.ts：


import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.scss']
})
export class FatherComponent {
  @ViewChild("child") child: any
  getChild() {
    this.child.child()
  }
  run(e: any) {
    alert("我是父组件的方法")
    console.log(e);//获取到的时emit过来的数据

  }
}

father.component.html：

<p>我是父组件</p>
<button (click)="getChild()">获取子组件里面的方法</button>
<hr>
<!-- 注意outer要和@Output() public outer = new EventEmitter()里面的outer一致 -->
<app-child #child (outer)="run($event)"></app-child>

4.非父子组件传值：

1.组件之间传值可以使用localstorage

2.共享方法可以使用service（可参考上篇使用）

三、生命周期函数

这里只讲一下使用，详细钩子请参考官网：Angular - 生命周期钩子

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  constructor() {
    console.log("0-constructor---除了使用简单的值对局部变量进行初始化之外，什么都不用做");
  }
  ngOnChanges() {
    console.log("1-ngOnChanges---当被绑定的输入属性的值发生变化时调用，父子传值时会被触发");
  }
  ngOnInit() {
    console.log("2-ngOnInit---请求数据一般放在这里");
  }
  ngDoCheck() {
    console.log("3-ngDoCheck---检测,并在angular发生无法或者不愿自己检测的变化时作出反应");
  }
  ngAfterContentInit() {
    console.log("4-ngAfterContentInit---当把内容投影到组件之后调用");
  }
  ngAfterContentChecked() {
    console.log("5-ngAfterContentChecked---每次完成被投影组件内容的变更检测之后调用");
  }
  ngAfterViewInit() {
    console.log("6-ngAfterViewInit---初始化完组件视图及其子视图之后调用,dom操作放在这个里面");
  }
  ngAfterViewChecked() {
    console.log("7-ngAfterViewChecked---每次完成组件视图和子视图的变更检测之后调用");
  }
  ngOnDestroy() {
    console.log("8-ngOnDestroy---销毁");
  }
}

四、RxJS（类似于vue中的promise）

RxJS是 ReactiveX编程理念的JavaScript版本。ReactiveX来自微软，它是一种针对异步数据流的编程。简单来说，它将一切数据，包括HTTP请求，DOM事件或者普通数据等包装成流的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据，并组合不同的操作符来轻松优雅的实现你所需要的功能。
RxJS是一种针对异步数据流编程工具，或者叫响应式扩展编程;可不管如何解释RxlS其目标就是异步编程，Angular引入 RxJS为了就是让异步可控、更简单。RxlS里面提供了很多模块。这里我们主要使用RxJS里面最常用的Observable和fromEvent。

目前常见的异步编程的几种方法：
1.回调函数

comoon.service.ts：

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

@Injectable({
  providedIn: 'root'
})
export class ComoonService {

  constructor() {

  }
  out() {
    return "service"
  }
  //解决方式，传入回调函数
  data(cb: any) {
    setTimeout(() => {
      var data = "张三"
      // return data

      cb(data)
    }, 1000)
  }
}

header.component.ts：

import { Component } from '@angular/core';
import { ComoonService } from "../../services/comoon.service"
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  constructor(public res: ComoonService) {
  }
  ngOnInit() {

    // let str = this.res.data()
    //undefined,获取不到service里的异步
    // console.log(str);

    this.res.data((data: any) => {
      console.log(data);//张三
    })
  }
}

2.事件监听/发布订阅

3.promise

comoon.service.ts：

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

@Injectable({
  providedIn: 'root'
})
export class ComoonService {

  constructor() {

  }
  PromiseData() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        var username = "张三"
        resolve(username)
      }, 1000)
    })
  }
}

header.component.ts：

import { Component } from '@angular/core';
import { ComoonService } from "../../services/comoon.service"
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  constructor(public res: ComoonService) {
  }
  ngOnInit() {
    let getData = this.res.PromiseData()
    getData.then((data) => {
      console.log(data);//张三

    })
  }
}

4.Rxjs

comoon.service.ts：

import { Injectable } from '@angular/core';
//1.引入Observable
import { Observable } from "rxjs"
@Injectable({
  providedIn: 'root'
})
export class ComoonService {

  constructor() {
  }
  // 2.使用，其中observe为参数可以自定义
  RxjsData() {
    return new Observable((observe) => {
      setTimeout(() => {
        var username = "张三"
        observe.next(username)
      }, 1000)
    })
  }
}

header.component.ts：

import { Component } from '@angular/core';
import { ComoonService } from "../../services/comoon.service"
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  constructor(public res: ComoonService) {
  }
  ngOnInit() {
    var RxjsData = this.res.RxjsData()
    // 通过subscribe返回数据
    RxjsData.subscribe((data) => {
      console.log(data);

    })
  }
}

从上面例子我们感觉promise和 RxJS 的用法基本相似。其实Rxjs相比promise要强大很多。比如Rxjs中可以中途撤回、Rxjs可以发射多个值、RxJS提供了多种工具函数等等。

5. Rxjs unsubscribe取消订阅

promise的创建之后，动作是无法撤回的。Observable不一样，动作可以通过unsbscribe（）方法中途撤回，而且Observable在内部做了智能的处理。

header.component.ts：

import { Component } from '@angular/core';
import { ComoonService } from "../../services/comoon.service"
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  constructor(public res: ComoonService) {
  }
  ngOnInit() {
    var RxjsData = this.res.RxjsData()
    // 通过subscribe返回数据
    var result = RxjsData.subscribe((data) => {
      console.log(data);

    })
    // 取消订阅，注意定时器时间要小于service定时器的时间
    setTimeout(() => {
      result.unsubscribe()
    }, 1000)
  }
}

6. Rxjs订阅后多次执行

如果我们想让异步里面的方法多次执行，这一点 Promise是做不到的,对于Promise来说,最终结果要么resole(兑现)、要么reject(拒绝），而且都只能触发一次。如果在同一个Promise 对象上多次调用resolve方法，则会抛异常。而 Observable不一样，它可以不断地触发下一个值，就像 next()这个方法的名字所暗示的那样。

comoon.service.ts：

import { Injectable } from '@angular/core';
//1.引入Observable
import { Observable } from "rxjs"
@Injectable({
  providedIn: 'root'
})
export class ComoonService {

  constructor() {
  }
  RxjsData() {
    let num = 0
    return new Observable((observe) => {
      setInterval(() => {
        num++
        var username = "张三" + num
        observe.next(username)
      }, 1000)
    })
  }
}

header.component.ts：

import { Component } from '@angular/core';
import { ComoonService } from "../../services/comoon.service"
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  constructor(public res: ComoonService) {
  }
  ngOnInit() {
    var RxjsData = this.res.RxjsData()
    // 通过subscribe返回数据
    var result = RxjsData.subscribe((data) => {
      console.log(data);

    })

  }
}

以上效果promise只执行一次。 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/390360.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

tftp、nfs 服务器环境搭建

tftp、nfs 服务器环境搭建

目录 一、认识 tftp、nfs 1、什么是 tftp&#xff1f; 2、什么是 nfs&#xff1f; 3、tftp 和 nfs 的区别 二、tftp的安装 1、安装 tftp 服务端 2、配置 tftp 3、启动 tftp 服务 三、nfs 的安装 1、安装 nfs 服务端 2、配置 nfs 3、启动 nfs 服务 一、认识 tftp、…
阅读更多...
3D目标检测（毕业设计+代码）

3D目标检测（毕业设计+代码）

概述 3d Objectron是一种适用于日常物品的移动实时3D物体检测解决方案。它可以检测2D图像中的物体&#xff0c;并通过在Objectron数据集上训练的机器学习&#xff08;ML&#xff09;模型估计它们的姿态. 下图为模型训练后推理的结果&#xff01; ​ 算法 我们建立了两个机器…
阅读更多...
web项目的初始化

web项目的初始化

Tomcat 安装配置 Tomcat 官方站点&#xff1a;Apache Tomcat - Welcome! 。 安装 得到下载的安装包&#xff08;一般是 zip 文件&#xff09;&#xff0c;并解压到你指定的目录&#xff08;建议不要解压在 c 盘&#xff09;&#xff1b;&#xff08;这里以 windows10 系统为例…
阅读更多...
网上电子商城的设计与实现

网上电子商城的设计与实现

技术&#xff1a;Java、JSP等摘要&#xff1a;21 世纪以来&#xff0c;人类经济高速发展&#xff0c;人们的生活发生了日新月异的变化&#xff0c;特别是计算机的应用及普及到经济和社会生活的各个领域。在消费领域&#xff0c;网上购物已经成为大众所接受的一种新型的消费方式…
阅读更多...
javaEE初阶 — 如何用 HTML 编写一个简易代码

javaEE初阶 — 如何用 HTML 编写一个简易代码

文章目录html1. 建立一个文本文档的方式编写2. 标签的方式编写3. 补充&#xff1a;更改后缀的方式4. 如何使用 VS Code 来编写一个 html 代码4.1 VS Code 的下载4.2 VS Code 的使用html html 用来描述网页的骨架&#xff0c;这是一个非常有特点的 标签化 的语言。 下面来写一个…
阅读更多...
分布式对象存储——Apache Hadoop Ozone

分布式对象存储——Apache Hadoop Ozone

前言 本文隶属于专栏《大数据技术体系》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见大数据技术体系 1. 概述 Ozone是Apache Hadoop项目的子项目&#xf…
阅读更多...
MySQL下载安装以及环境配置教程

MySQL下载安装以及环境配置教程

目录MySQL 下载MySQL 安装配置环境变量MySQL 下载 进入官方网站 https://www.mysql.com/ 点击 DOWNLOADS 进入下载页面 免费版本点击下方的 MySQL Community (GPL) Downloads 点击 MySQL Community Server 点击 Go to Download Page 进入下载页面 点击 Download 点击 No thank…
阅读更多...
【逐步剖C】-第九章-字符串函数和内存函数

【逐步剖C】-第九章-字符串函数和内存函数

前言&#xff1a;第一部分先简单介绍一下常用字符串函数和内存函数&#xff0c;第二部分再重点介绍重要函数的的模拟实现。若日后再发现某些好用或者有意思的库函数&#xff0c;都会在本文中进行更新。 一、常用库函数介绍 1. strlen &#xff08;1&#xff09;函数声明&…
阅读更多...
C语言-基础了解-11-C作用域规则

C语言-基础了解-11-C作用域规则

C作用域规则 一、C作用域规则 任何一种编程中&#xff0c;作用域是程序中定义的变量所存在的区域&#xff0c;超过该区域变量就不能被访问。C 语言中有三个地方可以声明变量&#xff1a; 1、在函数或块内部的局部变量 2、在所有函数外部的全局变量 3、在形式参数的函数参数定…
阅读更多...
Oracle Primavera P6 学习地图(Updating)

Oracle Primavera P6 学习地图(Updating)

目录P6介绍及使用P6异常处理P6部署配置维护P6集成及开发P6集成及开发为了方便大家更好的针对查询我博客中的内容&#xff0c;特针对P6不同方面进行简要分类&#xff0c;如在使用P6过程中有碰到任何问题&#xff0c;欢迎通过如下方式与我取得联系(查询联系方式) P6介绍及使用 P…
阅读更多...
什么是EventLoop？怎么测试Node或页面的性能

什么是EventLoop？怎么测试Node或页面的性能

Event Loop 机制大家应该都有了解。本文利用 EventLoop 去做一个有趣的检测node或页面性能的代码&#xff0c;顺便介绍了一下EventLoop&#xff0c;希望对大家有所帮助&#xff01; Event Loop Event Loop 机制大家应该都有了解。我先重复总结一下。 Node.js 和 Javascript 的…
阅读更多...
1.6 独立性

1.6 独立性

1.6.1 事件的独立性1.两个事件的独立性中任意两个事件都相互独立、則称 A,.A.&#xff0c;,A.两两独立&#xff0c;显然•若&#xff0c;个事件相互独立,則一定两两独立,反之,不一定成立【例 1.251 将一个均匀的正四面体的第一面染上红、黄、蓝三色&#xff0c;将其他三百多别染…
阅读更多...
C语言实现扫雷【详细讲解+全部源码】

C语言实现扫雷【详细讲解+全部源码】

扫雷的实现1. 配置运行环境2. 扫雷游戏的初步实现2.1 建立扫雷分布模块2.2 创建名为board的二维数组并进行棋盘初始化2.3 打印棋盘3. 接下来该讨论的事情3.1 布置雷3.2 排查雷3.3 统计坐标周围有几个雷4. 完整扫雷游戏的实现4.1 game.h4.2 game.c4.3 扫雷.c1. 配置运行环境 本游…
阅读更多...
你相信吗？用ChatGPT写井字棋游戏仅需几分钟

你相信吗？用ChatGPT写井字棋游戏仅需几分钟

井字棋 我们先实现一个最基本的使用控制台交互的井字棋游戏。 为了保持代码整洁&#xff0c;方便后续扩展&#xff0c;我们使用类Board来实现棋盘。除了常规的初始化方法__init__和字符串方法__str__&#xff0c;我们还要判断游戏的胜负、棋子位置的合理性。 在main中&…
阅读更多...
扩展WSL2虚拟硬盘的大小

扩展WSL2虚拟硬盘的大小

扩展WSL2虚拟硬盘的大小 1、在 Windows PowerShell 中终止所有 WSL 实例 wsl --shutdown2、查看 WSL 实例运行状态&#xff0c;确认关闭&#xff0c;并记住发行版的名称 wsl -l -v如果没有更改移动过发行版安装包位置&#xff0c;那么可以通过以下方法查找到发行版的安装包位…
阅读更多...
[算法]选择排序

[算法]选择排序

目录 1、选择排序的实现 2、例子 3、代码实现 4、时间复杂度和空间复杂度 5、选择排序的缺点——不稳定性 1、选择排序的实现 选择排序就是每一轮选择最小的元素直接交换到左侧。这种排序的最大优势&#xff0c;就是省去了多余的元素交换。 2、例子 原始数组和选择排序的…
阅读更多...
NSIS 多语言安装界面

NSIS 多语言安装界面

NSIS默认的打包界面多语言不太好用&#xff0c;因为界面不能跟着切换语言上面的文字也随着切换&#xff0c;所以只能是考虑自定义的方法解决这个问题 本人采用duilib与NSIS结合的方法&#xff0c;效果如下所示&#xff1a; ;获取系统默认的语言 System::Call Kernel32::Ge…
阅读更多...
仪表放大器放大倍数分析-运算放大器

仪表放大器放大倍数分析-运算放大器

仪表放大器是一种非常特殊的精密差分电压放大器&#xff0c;它的主要特点是采用差分输入、具有很高的输入阻抗和共模抑制比&#xff0c;能够有效放大在共模电压干扰下的信号。本文简单分析一下三运放仪表放大器的放大倍数。 一、放大倍数理论分析 三运放仪表放大器的电路结构…
阅读更多...
如何快速在企业网盘中找到想要的文件

如何快速在企业网盘中找到想要的文件

现在越来越多的企业采用企业网盘来存储文档和资料&#xff0c;而且现在市面上的企业网盘各种各样。在使用企业网盘过程中&#xff0c;很多用户会问到企业网盘中如何快速搜索文件的问题。但是无论是“标签”功能还是普通的“关键词搜索”功能&#xff0c;都是单层级的&#xff0…
阅读更多...
SAP MM学习笔记7-SAP标准功能和Add-on之间的关系

SAP MM学习笔记7-SAP标准功能和Add-on之间的关系

大家都知道SAP标准功能异常强大&#xff0c;而且也可以用ABAP做Add-on开发&#xff0c;在ERP市场长期占No1地位&#xff0c;那么SAP标准功能和Add-on之间到底有什么的关系呢&#xff1f; 咱们今天就来探讨一下。 1,一图说明标准和Add-on之间的关系 <图中上面一行> 1&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023