Angular组件间通讯

已于 2024-10-31 16:18:33 修改
阅读量235 收藏
点赞数
分类专栏： Angular在线竞拍 文章标签： 前端
于 2018-12-27 10:57:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44174685/article/details/85274262
版权

1.1 组件的输入属性

父子组件 父组件–>子组件
效果图
在这里插入图片描述
1
1.1生成子组件
–> ng g component order
order.component.ts

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

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html',
  styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {
  /*输入属性*/
  @Input()/*装饰器*/
  stockCode: string;
  @Input()
  amount: number;
  constructor() {
    setInterval(() => {
      this.stockCode = 'Apple';
    }, 3000);
  }
  ngOnInit() {
  }
}

order.component.html

<div>
  我是子组件
</div>
<div>
  买{{amount}}手{{stockCode}}股票
</div>

1.2父组件
app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  stock = '';
}

app.component.html

<div>
  我是父组件
</div>
<div>
<input type="text" placeholder="请输入股票代码"
  [(ngModel)]="stock">
  <app-order [stockCode]="stock" [amount]="100"></app-order>
</div>

1.2 组件的输出属性

1
1.1生成子组件
–> ng g component price-quote
price-quote.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-price-quote',
  templateUrl: './price-quote.component.html',
  styleUrls: ['./price-quote.component.css']
})
export class PriceQuoteComponent implements OnInit {
  stockCode = 'IBM';
  price: number;
  constructor() {
    setInterval(() => {
      const priceQuote: PriceQuote = new PriceQuote(this.stockCode, 100 * Math.random());
      this.price = priceQuote.lastPrice;
      }, 1000);
  }
  ngOnInit() {
  }
}
export class PriceQuote {
  constructor(public stockCode: string,
  public  lastPrice: number) {
  }
}

price-quote.component.html

<div>
  我是报价组件
</div>
<div>
  股票代码是：{{stockCode}}，股票价格是：{{price | number:'2.2-2'}}
</div>

app.component.html

<app-price-quote></app-price-quote>

效果图
1.2
price-quote.component.ts

import {Component, EventEmitter, OnInit, Output} from '@angular/core';
...
export class PriceQuoteComponent implements OnInit {
  stockCode = 'IBM';
  price: number;
  /*输出属性*/
  @Output('priceChange')
    /*<PriceQuote>：发射数据的事件类型*/
  lastPrice: EventEmitter<PriceQuote> = new EventEmitter();
  constructor() {
    setInterval(() => {
      const priceQuote: PriceQuote = new PriceQuote(this.stockCode, 100 * Math.random());
      this.price = priceQuote.lastPrice;
      this.lastPrice.emit(priceQuote);
      }, 1000);
  }
  ngOnInit() {
  }
}
export class PriceQuote {
  constructor(public stockCode: string,
  public  lastPrice: number) {
  }
}

app.component.ts

import { Component } from '@angular/core';
import {PriceQuote} from './price-quote/price-quote.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  stock = '';
  /*接收子组件*/
  priceQuote: PriceQuote = new PriceQuote('', 0);
  priceQuoteHandler(event: PriceQuote) {
    this.priceQuote = event;
  }
}

app.component.html

<app-price-quote (priceChange)="priceQuoteHandler($event)" ></app-price-quote>
<div>
  这是在报价组件外部
</div>
<div>
  股票代码是：{{priceQuote.stockCode}},
  股票价格是{{priceQuote.lastPrice}}
</div>

效果图

2 使用中间人模式传递数据

1
price-quote.component.html

<div>
  我是报价组件
</div>
<div>
  股票代码是：{{stockCode}}，股票价格是：{{price | number:'2.2-2'}}
</div>
<div>
  <input type="button" value="立即购买" (click)="buyStock($event)">
</div>

price-quote.component.ts

@Output()
  buy: EventEmitter<PriceQuote> = new EventEmitter();
  buyStock(event) {
    this.buy.emit(new PriceQuote(this.stockCode, this.price));
  }

2
order.component.html

<div>
  我是下单组件
</div>
<div>
  买100手{{priceQuote.stockCode}}股票，买入价格是：{{priceQuote.lastPrice | number:'2.2-2'}}
</div>

order.component.ts

@Input()
  priceQuote: PriceQuote;

3
app.component.html

<!--监听&ndash;&gt;获得购买信息&ndash;&gt;传给下单组件-->
<app-price-quote (buy)="buyHandler($event)" ></app-price-quote>
<app-order [priceQuote]="priceQuote"></app-order>

app.component.ts

export class AppComponent {
  stock = '';
  /*接收子组件*/
  priceQuote: PriceQuote = new PriceQuote('', 0);
  buyHandler(event: PriceQuote) {
    this.priceQuote = event;
  }
}

效果图

3 组件生命周期以及Angular的变化发现机制

图片描述
钩子调用机制、使用场景
1生成组件
–> ng g component life
2
life.component.ts

import {
  AfterContentChecked,
  AfterContentInit,
  AfterViewChecked,
  AfterViewInit,
  Component,
  DoCheck,
  Input,
  OnChanges,
  OnDestroy,
  OnInit, SimpleChanges
} from '@angular/core';

  let logIndex = 1;
@Component({
  selector: 'app-life',
  templateUrl: './life.component.html',
  styleUrls: ['./life.component.css']
})
/*实现所有的钩子接口*/
export class LifeComponent implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked,
  AfterViewInit, AfterViewChecked, OnDestroy  {
  @Input()
  name: string;
  logIt (msg: string) {
    console.log(`#${ logIndex++ } ${ msg }`);
  }
  constructor() {
    this.logIt('name属性在constructor里的值是：' + name);
  }
  ngOnChanges(changes: SimpleChanges): void {
    const name = changes['name'].currentValue;
    this.logIt('name属性在ngOnChanges里的值是：' + name);
  }

  ngOnInit() {
    this.logIt('ngOnInit');
  }

  ngDoCheck(): void {
    this.logIt('ngDoCheck');
  }

  ngAfterContentInit(): void {
    this.logIt('ngAfterContentInit');
  }

  ngAfterContentChecked(): void {
    this.logIt('ngAfterContentChecked');
  }

  ngAfterViewInit(): void {
    this.logIt('ngAfterViewInit');
  }

  ngAfterViewChecked(): void {
    this.logIt('ngAfterViewChecked');
  }

  ngOnDestroy(): void {
    this.logIt('ngOnDestroy');
  }
}

app.component.ts

export class AppComponent {
  title = 'Tom';
}

app.component.html

<app-life [name]="title"></app-life>

console

ngOnChanges

父组件初始化、修改子组件参数时调用
可变：对象.属性—内容
var user = {name: “Tom”};
user.name = “Jerry”;
不可变：字符串—地址
var greeting = “Hello”;
greeting = “HelloWorld”;
1.生成组件
–> ng g component child
2.子组件
child.component.ts

import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges{
  @Input()
  /**/
  greeting: string;
  @Input()
  user: {name: string};
  message = '初始化信息';
  constructor() { }

  ngOnInit() {
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log(JSON.stringify(changes, null, 2));
  }
}

child.component.html

<div class="child">
  <h2>我是子组件</h2>
  <div>问候语：{{greeting}}</div>
  <div>姓名：{{user.name}}</div>
  <div>消息：<input [(ngModel)]="message"></div>
</div>

3.父组件
app.component.ts

export class AppComponent {
  greeting = 'Hello';
  user = {name: 'Tome'};
}

app.component.html

<div class="parent">
  <h2>我是父组件</h2>
  <div>
    问候语：<input type="text" [(ngModel)]="greeting">
  </div>
  <div>
    姓名：<input type="text" [(ngModel)]="user.name">
  </div>
  <app-child [greeting]="greeting" [user]="user"></app-child>
</div>

4.效果图
console.log：父组件初始化、修改输入装饰器装饰的属性
效果图
修改父组件问候语输入框
效果图
修改父组件姓名输入框
效果图
修改子组件消息输入框
在这里插入图片描述

变更检测机制

package.json–>dependencies–>zone.js
zone.js:保证组件的属性的变化和页面的变化同步
浏览器中发生异步事件触发检测：点击、输入、、、、
变更检测策略：
变更检测策略
子组件变化，其父组件下所有，除OnPush
变更检测策略

DoCheck

child.component.ts

import {Component, DoCheck, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges, DoCheck {
  @Input()
  /**/
  greeting: string;
  @Input()
  user: {name: string};
  message = '初始化信息';
  oldUsername: string;
  changeDetected = false;
  noChangeCount = 0;
  constructor() { }

  ngOnInit() {
  }
  ngOnChanges(changes: SimpleChanges): void {
    console.log(JSON.stringify(changes, null, 2));
  }
  ngDoCheck(): void {
    if (this.user.name !== this.oldUsername) {
      this.changeDetected = true;
      console.log('DoCheck:user.name Before:' + this.oldUsername + ';After:' + this.user.name);
      this.oldUsername = this.user.name;
    }
    if (this.changeDetected) {
      this.noChangeCount = 0;
    } else {
      this.noChangeCount = this.noChangeCount + 1;
      console.log('DoCheck:user.name没变化时，ngDoCheck方法已经被调用' + this.noChangeCount);
    }
    this.changeDetected = false;
  }
}

效果图
效果图

view

1.–> ng g component childTwo
child-two.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-child-two',
  templateUrl: './child-two.component.html',
  styleUrls: ['./child-two.component.css']
})
export class ChildTwoComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
  greeting (name: string) {
    console.log('hello:' + name);
  }
}

1.在父组件控制器用typescript代码，装饰器 @ViewChild('child1')
app.component.html

<app-child-two #child1></app-child-two>

app.component.ts

import {Component, OnInit, ViewChild} from '@angular/core';
import {ChildTwoComponent} from './child-two/child-two.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  /*装饰器，获得子组件的引用*/
  @ViewChild('child1')
  child1: ChildTwoComponent;
  constructor () {}
  ngOnInit (): void {
    this.child1.greeting('Tom');
  }
}

效果图
2.在父组件的模板中调用子组件的方法
app.component.html

<app-child-two #child2></app-child-two>
<button (click)="child2.greeting('Jerry')">调用child2的greeting方法</button>

效果图
3.观察
app.component.ts

import {AfterViewChecked, AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {ChildTwoComponent} from './child-two/child-two.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit, AfterViewChecked {
  /*装饰器，获得子组件的引用*/
  @ViewChild('child1')
  child1: ChildTwoComponent;
  constructor () {}
  ngOnInit (): void {
    setInterval(() => {
      this.child1.greeting('Tom');
    }, 5000);
  }
  ngAfterViewInit(): void {
    console.log('父组件的视图初始化完毕');
  }
  ngAfterViewChecked(): void {
    console.log('父组件的视图变更检测完毕');
  }
}

child-two.component.ts

import {AfterViewChecked, AfterViewInit, Component, OnInit} from '@angular/core';
@Component({
  selector: 'app-child-two',
  templateUrl: './child-two.component.html',
  styleUrls: ['./child-two.component.css']
})
export class ChildTwoComponent implements OnInit, AfterViewInit, AfterViewChecked {
  constructor() { }
  ngOnInit() {
  }
  greeting (name: string) {
    console.log('hello:' + name);
  }
  ngAfterViewInit(): void {
    console.log('子组件的视图初始化完毕');
  }
  ngAfterViewChecked(): void {
    console.log('子组件的视图变更检测完毕');
  }
}

效果图
问题图
AppComponent.html:36 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: undefined'. Current value: 'null: SYS'.
问题：禁止视图被组装好后再次更新视图
app.component.ts

import {AfterViewChecked, AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {ChildTwoComponent} from './child-two/child-two.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit, AfterViewChecked {
  message: string;
  constructor () {}
  ngAfterViewInit(): void {
    console.log('父组件的视图初始化完毕');
    this.message = 'SYS';
  }
  ngAfterViewChecked(): void {
    console.log('父组件的视图变更检测完毕');
  }
}

app.component.html

{{message}}

解决：换个javascript运行周期中运行
修改app.component.ts

import {AfterViewChecked, AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {ChildTwoComponent} from './child-two/child-two.component';
...
  ngAfterViewInit(): void {
    console.log('父组件的视图初始化完毕');
    setTimeout(() => {
      this.message = 'SYS';
    }, 0);
  }
...
投影
  1. –> ng g component projection
  2. projection.component.html
<div class="wrapper">
  <h2>我是子组件</h2>
  <div>这个div定义在子组件中</div>
  <!--ng-content指令：标记投影点-->
  <ng-content></ng-content>
</div>
  1. app.component.html
<div class="wrapper">
  <h2>我是父组件</h2>
  <div>这个div定义在父组件中</div>
  <app-projection>
    <div>这个div是父组件投影到子组件的</div>
  </app-projection>
</div>

效果图
2. projection.component.html

<div class="wrapper">
  <h2>我是子组件</h2>
  <ng-content select=".header"></ng-content>
  <div>这个div定义在子组件中</div>
  <ng-content select=".footer"></ng-content>
</div>
  1. app.component.html
<div class="wrapper">
  <h2>我是父组件</h2>
  <div>这个div定义在父组件中</div>
  <app-projection>
  /*注：{{插值表达式只能用父组件属性}}*/
    <div class="header">页头，这个div是父组件投影到子组件的,title是{{title}}</div>
    <div class="footer">页脚，这个div是父组件投影到子组件的</div>
  </app-projection>
</div>

效果图
app.component.html

<!--innerHTML：浏览器特定API，只能在浏览器用-->
<div [innerHTML]="divContent"></div>

app.component.ts

 divContent = '<div>慕课网</div>';

效果图

ngContent

projection.component.ts

import {AfterContentChecked, AfterContentInit, Component, OnInit} from '@angular/core';
@Component({
  selector: 'app-projection',
  templateUrl: './projection.component.html',
  styleUrls: ['./projection.component.css']
})
export class ProjectionComponent implements OnInit, AfterContentInit, AfterContentChecked {
  constructor() { }
  ngOnInit() {
  }
  ngAfterContentInit(): void {
    console.log('子组件的投影内容初始化完毕');
  }
  ngAfterContentChecked(): void {
    console.log('子组件的投影内容变更检测完毕');
  }
}

app.component.ts

import {
  AfterContentChecked, AfterContentInit, AfterViewChecked, AfterViewInit, Component, OnInit,
  ViewChild
} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterContentInit, AfterContentChecked, AfterViewInit {
  ngAfterContentInit(): void {
    console.log('父组件的投影内容初始化完毕');
  }
  ngAfterContentChecked(): void {
    console.log('父组件的投影内容变更检测完毕');
  }
  ngAfterViewInit(): void {
    console.log('父组件的视图初始化完毕');
  }
}

console

ngOnDestory

–> ng g component destory
app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
...
/*1.路由配置*/
const routerConfig: Routes = [
  {path: '', component: ProjectionComponent},
  {path: 'destory', component: DestoryComponent}
]
@NgModule({
  ...
  imports: [
    BrowserModule,
    FormsModule,
    /*2.声明，把路由配置导入模块*/
    RouterModule.forRoot(routerConfig)
  ],
  ...
})
export class AppModule { }

app.component.html

<a [routerLink]="['/']">projection</a>
<a [routerLink]="['/destory']">destory</a>
<!--插座-->
<router-outlet></router-outlet>

projection.component.html

<div>projection</div>

projection.component.ts

import {AfterContentChecked, AfterContentInit, Component, OnDestroy, OnInit} from '@angular/core';
@Component({
  selector: 'app-projection',
  templateUrl: './projection.component.html',
  styleUrls: ['./projection.component.css']
})
export class ProjectionComponent implements OnInit, OnDestroy {
  ngOnDestroy(): void {
    console.log('projection组件被销毁');
  }
  constructor() { }
  ngOnInit() {
  }
}

destory.component.ts

<div>destory</div>

destory.component.ts

import {Component, OnDestroy, OnInit} from '@angular/core';
@Component(
  selector: 'app-destory',
  templateUrl: './destory.component.html',
  styleUrls: ['./destory.component.css']
})
export class DestoryComponent implements OnInit, OnDestroy  {
  ngOnDestroy(): void {
    console.log('destory组件被销毁');
  }
  constructor() { }
  ngOnInit() {
  }
}

效果图

 嘘 
关注
专栏目录
angular学习-2021.5
mytimelover的博客
05-12 2735
angular学习笔记 1.基本概览 模块 Module 组件 Component 指令 Directive 服务 Service 路由 Router 2. 模块Module 2.1 模块的含义 2.1.1 declarations 2.1.2 imports 2.1.3 providers 2.1.4 bootstrap 2.1.5 exports 2.1.6 entryComponents 3.组件 3.1 组件的含义 3.1.1 装饰器-元数据 3.1.2 模板 3.
Angular 语法的快速指南
xiejunna的博客
12-13 5098
//引导 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';platformBrowserDynamic().bootstrapModule(AppModule); //从一个指定的NgModule中使用根组件引导应用 NgModules import { NgModule } fro
Angular 深入学习
woyebuzhidao321的博客
05-01 1330
一. 管道 Pipe 管道的作用是格式化组件模板数据。 1.1 内置管道 date 日期格式化 currency 货币格式化 uppercase 转大写 lowercase 转小写 json 格式化json 数据 {{ date | date: "yyyy-MM-dd" }} 1.2 自定义管道 需求：指定字符串不能超过规定的长度 // summary.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name
angular5基础笔记
咖啡壶的博客
04-01 1423
Angular5 基础
angular中服务b依赖服务a如何export
zgrbsbf的专栏
08-10 1220
1.服务b依赖与服务a的一般情况 一个模块中的一个一个组件，AbComponent，其中需要注入服务BService。 import {Component} from '@angular/core'; import {BService} from './b.service'; @Component({ template: '' }) export class AbComponent { ...
angular组件间通讯的实现方法示例
10-15
本文将详细介绍Angular组件间通信的几种方法，并通过示例代码来具体展示如何实现。 首先，我们需要理解组件间的基本关系类型。在Angular中，组件间的关系大致可以分为三类：父子关系、兄弟关系和无直接关系。父子...
angular组件间通讯
weixin_40957414的博客
01-31 904
一个Angular应用一般情况下包含多个组件，而且要让组件互相之间能进行通讯(数据传送)，这样才能构成一个有机的完整系统。 1、情景引入 下面例举一个实际遇到的情况：上图页面包含两个组件，“新增班级组件”和“选择教师组件”，在新增班级时需要选择改班级的管理教师，管理教师列表要从数据库中获取。选择好教师后，“选择教师组件”要把选择的教师对象传递回“新增班级组件”，这其中涉及到对象传递称为通...
Angular2 组件间通过@Input @Output通讯示例
08-29
在Angular2及其后续版本中，组件间的通信是应用程序中至关重要的部分。`@Input` 和 `@Output` 是Angular提供的两种主要机制，用于在组件之间传递数据。在本示例中，我们将深入探讨如何利用这两种装饰器进行组件间的...
Angular父子组件以及组件之间通讯示例代码.zip
05-20
Angular组件间的通讯主要通过以下几种方式： 1. **属性绑定（Property Binding）**：父组件通过属性绑定将数据传递给子组件。在HTML模板中，我们使用`[]`语法将父组件的属性值绑定到子组件的输入属性上。例如： ``...
在 Angular 中添加 class (css 类)的几种方式
法研鲁迅的个人博客
12-19 4341
在 Angular 中添加 css 类的几种方式 主要是探索为 Angular 中的 HTML 元素动态的添加类的几种实现，包括 className 指令的使用，NgClass 的使用等。
Angular4 - 依赖注入
小蚂蚁的世界
02-25 2527
Angular4 - 依赖注入 1. 例子 (不是很恰当) 第一版 //car.ts export class Car { engine: Engine; doors: Doors; body: Body; constructor() { this.engine = new Engine(); this.body = new Body(); this
Angular4学习笔记（四）：service
热门推荐
龙骑将的城堡
04-17 1万+
一个service引发的解耦
Angular2 模块入门学习
weixin_30849403的博客
03-28 61
最近在看Angular2，模块的学习让我有点晕，写个例子供以后入门的同学参考，但是要深入的话还是要看官方文档。 官方的介绍https://angular.cn/docs/ts/latest/guide/ngmodule.html 引用官方的一句话：Angular 模块能帮你把应用组织成多个内聚的功能块。 首先创建我们自己的module文件（我只创建了基本的文件，可以根据自己的需求再丰富） 先上代...
Angular添加class的正确方式
FlyWine的博客
03-09 4594
Angular添加class的正确方式 很多时候我们会遇到需要给元素增加或删除指定class，从而达到某种目的。那么在Angular中我们如何添加? className属性绑定 我们可以通过HTML元素的className属性进行绑定： <div [className]="'demo-class'"></div> 当然也可以通过表达式进行绑定： <div [clas...
Angular 4.x NgClass 指令用法
xwnxwn的专栏
08-25 2679
引用地址 ：http://yunkus.com/angular-api-ngclass/ 用法 语 &lt;some-element [ngClass]="'first second'"&gt;...&lt;/some-element&gt;   &lt;some-element [ngClass]="['first', 'second']"&gt;...&lt;/some-elemen...
angular 依赖注入2---useClass
米斯特尔曾的博客
07-01 1555
文件 real.service.ts import { Injectable } from '@angular/core'; @Injectable() export class RealService { data = { name: 'real service' } constructor() { } changeData(value: string= 'ch...
angular 自定义组件
后台模板
02-03 3087
自定义组件 http://www.ngui.cc/news/show-103.html 在 Angular 中，我们可以通过 Component 装饰器和自定义组件类来创建自定义组件。 基础知识 定义组件的元信息 在 Angular 中，我们可以使用 Component 装饰器来定义组件的元信息： @Component({ selector: 'my-app', //
Angular组件之间的通信方式。
SilenceJude的博客
12-27 6723
准备写到Angular总结中去的，又怕太长以后自己都找不到,就先写下来再说吧！ Angular组件之间的通信方式，和vue一样有3种。 1.父组件往子组件传递（vue中是props down） 2.子组件往父组件传递（vue中是events up） 3.非父子关系组件传递（vue中是bus总线） ...
WEBRTC教程:局域网怎么调试，http://172.19.18.101:8080 ,无法访问摄像头和麦克风，请检查权限
最新发布
keyboard专栏
10-25 1105
在局域网中使用 WebRTC 时，无法访问摄像头和麦克风通常是因为浏览器的安全策略限制了API 的使用。如果你在非localhost或非 HTTPS 环境下访问网页，浏览器会阻止访问摄像头和麦克风。localhost大多数浏览器允许在localhost上使用，即使没有 HTTPS。所以你可以在服务器和客户端同一台机器上使用localhost进行测试。如果你需要在局域网的 IP 地址上（如）进行访问，那么使用 HTTPS 是解决方案之一。通过配置 HTTPS，你可以避免浏览器的安全限制。使用openssl。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值