小编Car*_*llo的帖子

我正在使用带有Sass的Bootstrap 4进行​​Angular 4项目,我想使用glyphicons但是当我使用以下代码时:

<button class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-thumbs-up"></span>Like</button>

例如,在制作"喜欢"按钮时,图标不会显示.

我配置项目以使用ng-serve命令编译SCSS样式表,我angular-cli.json看起来像这样:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "front-end-informatorio"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "../node_modules/bootstrap/scss/main.scss"

      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json", …

我正在使用font-awesome进行角度4项目,我按照本指南使用npm安装库: 如何为Angular 2 + CLI项目添加字体功能

我已经使用ng-serve命令配置项目来编译scss样式表,我的angular-cli.json的样式路径如下所示:

"styles": [
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "../node_modules/bootstrap/scss/main.scss",
        "../node_modules/font-awesome/scss/font-awesome.scss"

      ],

我想制作一个带有地址卡图标的按钮,我也在使用Bootstrap 4,所以它看起来像这样:

<button class="btn btn-sm btn-primary"><span class="fas fa-address-card"></span></button>

但是当它加载时,它看起来像这样:

基本上,我需要的是一个计算属性,当窗口内部宽度等于或低于768px时返回true,当它高于768px时返回false.

我做了什么:

computed: {
  isMobile() {
    if (window.innerWidth <= 768) {
      return true
    } return false
  }
}

但是只计算一次该属性,如果我稍后调整窗口大小,它不会对该更改做出反应,我该怎么办？

我正在使用 Webpack 和 Babel 开发一个 Vue 项目，并尝试从一个带有 module.exports 的单个文件中导出两个 Js 类，并将其包含在具有如下要求的组件中：

类.js

class classOne {
  constructor(){
  }
  f1() {}
  f2() {}
  ...
}
class classTwo {
  constructor(){
  }
  f1() {}
  f2() {}
  ...
}
module.exports = {
  classOne,
  classTwo
}

component.vue 的 script 标签

const classes = require('@/path/to/classes.js');

export default {
  data() {
    return {
      var: undefined,
      foo: undefined,
    }
  }
  created() {
    this.var = new classes.classOne();
    this.foo = new classes.classTwo();
  }
}

但我收到此错误：

Uncaught TypeError: Cannot assign to read …

场景： 我有一个 ID 为“slider”的 div，并且必须将其 offsetWidth 的反应值存储在组件数据函数的变量内。

所以我做了这样的事情：

<template>
  <div id="slider">
  </div>
</template>

<script>
export default {
  name: 'Slider',
  mounted() {
    window.addEventListener('resize', function () {
      this.sliderWidth = document.getElementById('slider').offsetWidth;
    });
  },
  data() {
    return {
      sliderWidth: 0,
    };
  },
  methods: {
  },
};
</script>

然后我添加了一个方法来查看当前的 sliderWidth 值

methods: {
   callwidth() {
    console.log(this.sliderWidth);
   } 
  },

并将该方法添加到 div 上的 @click 事件中：

<div id="slider" @click="callWidth">
</div>

但随后奇怪的事情开始发生，当我在调整窗口大小后单击滑块时，其值始终为 0。

所以我在事件监听器上添加了一个控制台日志，如下所示：

  mounted() {
    window.addEventListener('resize', function () {
      this.sliderWidth = document.getElementById('slider').offsetWidth;
      console.log(this.sliderWidth)
    });
  },

当我调整窗口大小时，它每次都会在事件侦听器的控制台日志上抛出一个新值，但是如果我单击 div，callWidth 函数的 …

我正在开发一个项目，其中我必须使用进入和离开动画来渲染一些组件，当组件进入屏幕时，它必须从底部进入，当它离开时，它必须向上执行，这是所需的行为是，当我更改组件标记的 :is 属性时，当前组件向上移动，下一个组件从底部移动，代码如下所示：

<template>
  <div class="home">
    <transition name="section">
      <component :is="activeSection"></component>
    </transition>
  </div>
</template>

<script>
import comp1 from './comp1';
import comp2 from './comp2';

export default {
  components: {
    comp1,
    comp2
  },
  data() {
    activeSection: 'comp1'
  }
</script>

<style scoped>
  .section-enter {
    top: 100vh;
  }
  .section-enter-to {
    top: 0vh;
  }
  .section-enter-active {
    animation-name: 'slideIn';
    animation-duration: 1s;
  }
  .section-leave {
    top: 0vh;
  }
  .section-leave-active {
    animation-name: 'slideOut';
    animation-duration: 1s;
  }
  .section-leave-to {
    top: -100vh;
  }


  @keyframes slideIn {
    from {
      top: 100vh;
    } …

场景：我正在开发一个项目，我必须使用按钮显示管弦乐队的不同组件。我所做的是在我的类中设置一个名为“组件”的变量，如下所示：

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

@Component({
  selector: 'app-orchestra',
  templateUrl: './orchestra.component.html',
  styleUrls: ['./orchestra.component.scss']
})
export class OrchestraComponent implements OnInit {

component:string

ngOnInit() {

  }
}

并创建了一个接收参数“ins”（对于仪器）并将变量值更改为该参数的方法：

selected(ins){
  this.component = ins
}

在我的模板上我做了一些按钮和 div：

<button (click)="selected('violines')">violines</button>
<button (click)="selected('percussion')">percussion</button>
<button (click)="selected('doublebass')">double bass</button>

<div *ngIf="component === 'violines'">All the violines here</div>
<div *ngIf="component === 'percussion'">All the percussion here</div>
<div *ngIf="component === 'doublebass'">All the doublebass here</div>

问题：

到目前为止一切都很完美，但我想制作一个在屏幕上显示所有乐器的按钮，所以我考虑制作一个将“ins”变量设置为值“all”的按钮，但我不知道这是否是可以使用 *ngIf 检查变量的两个值，如下所示：

<div *ngIf="component === 'violines' or 'all'">All the violines here</div>

我正在一个网站上工作，该网站在异步等待函数中使用 axios 发出了一个请求，如下所示：

async function () {
  try {
    const response = await axios.get('requestUrl')
  } catch (e) {
    throw new Error(e)
  }
}

一切正常，但我不知道如何处理特定状态的错误（例如，当响应状态为 400 时显示特定消息）。我尝试使用 e.status，但它不起作用，所以，我不知道要调用什么才能获取请求的状态。我还尝试了带有 response.status 的 try 函数，我知道它会响应 400 状态，但它也不起作用。它仅在response.status为200时有效。

我刚刚完成了一个用 Nuxtjs 开发的通用应用程序，并想将它部署在我工作的公司的服务器上。我不得不说我是服务器方面的新手，所以我有点迷失在这里。

服务器的规格如下：

大多数教程都讨论使用 Nginx 代理，这就是我首先做的，但为此我杀死了使用 que 端口 80 的 apache 服务器（我不知道我在这样做），所以我再次安装了 apache 服务器并放弃了 nginx。

然后我在网上找到了一个.htaccess文件并尝试了一下，该文件有以下代码：

.htaccess

RewriteEngine on
 
RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

DirectoryIndex index.html

RewriteRule ^$ http://127.0.0.1:3000/ [P,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ http://127.0.0.1:3000/$1 [P,L]

它根本不起作用

然后我尝试在 apache 的 httpd.conf 文件上写下两行（我在另一个教程中找到了两行）。

ProxyPass "https://appdomain.tk" "http://localhost:3000"
ProxyPassReverse "https://appdomain.tk" "http://localhost:3000" 

他们也没有工作。我正在失去理智。我为域配置了 ssl 证书，以及一个免费域 .tk

实际上有没有办法在 apache 共享主机上部署通用 Nuxt.js 应用程序？

我正在开发 Nuxt.js 应用程序，我想使用资产文件夹中的图像动态设置元素的背景图像，这就是我所做的：

<template>
  <div>
    <div
      v-for="(image, imageID) in images"
      :key="imageID"
      :style="bgImg(image)"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      images: [
        '~assets/img/image1.jpg',
        '~assets/img/image2.jpg',
        '~assets/img/image3.jpg',
        '~assets/img/image4.jpg'
      ]
    }
  },
  methods: {
    bgImg(img) {
      return `background-image: url(${img})`
    }
  }
}
</script>

预期行为

div 是用动态背景图像呈现的

实际行为

不渲染背景图像。如果我将静态资产路径放入 css 文件中，则会呈现它

我必须如何传递路径才能正确呈现？

我在Angular 4项目中使用Bootstrap 4和Ng-Bootstrap,

我用这种方式链接了我的angular-cli.json中的que bootstrap.css

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

并在我的app.module中导入了NgbModule,看起来像这样

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

import { AppComponent } from './app.component';

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

我做了一个Navbar从bootstrap网站复制文档并添加了ng-bootstrap的toggle组件(它工作正常)代码看起来像这样

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse …

¿我如何使页脚停留在具有以下结构的网站底部？

<html>
    <head>
    </head>

    <body>
        <app-root></app-root>
    </body>

</html>

因此，app-root是angular中的主要组件，在该组件内部，我具有以下结构：

<app-navbar></app-navbar>
<div class="container">
    <div class="row">

        <div class="col-12 p-0">
            <app-information *ngIf="title == 'information'"></app-information>
            <app-form *ngIf="title == 'form'"></app-form> 
            <app-proyects *ngIf="title == 'proyects'"></app-proyects>
            <app-blog *ngIf="title == 'blog'"></app-blog>
            <app-courses *ngIf="title == 'coursess'"></cursos>
        </div>

    </div>
</div>
<app-footer></app-footer>

因此，仅出于理解目的，显示col-12 div内的div取决于一个变量，该变量是通过按导航栏上的按钮设置的标题。情况是，并非所有这些div的内容都超过了屏幕大小，并且页脚向上。

在页脚内部，我具有以下结构：

<footer class="bg-inf-blue" >
    <div class="container p-0">
        <div class="row text-white py-3">
            <div class="col-6 h6 p-0">Contact</div>
            <div class="col-6 h6">Social Media</div>
            <div class="col-2 p-0">
                <ul class="list-unstyled">
                    <li class="h6">Place 1</li>
                    <li>Place 1 address</li>
                    <li>XXX XXX-XXXX</li>
                </ul>
            </div>
            <div class="col-2">
                <ul …