显然,Angular2的测试版比新版更新,因此没有太多的信息,但我正在尝试做我认为是一些相当基本的路由.
使用https://angular.io网站上的快速入门代码和其他代码片段进行黑客攻击导致了以下文件结构:
angular-testapp/
app/
app.component.ts
boot.ts
routing-test.component.ts
index.html
文件填充如下:
的index.html
<html>
<head>
<base href="/">
<title>Angular 2 QuickStart</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {ROUTER_PROVIDERS} from 'angular2/router';
import …当我尝试使用POST请求访问本地服务器时收到以下错误:
XMLHttpRequest无法加载http://127.0.0.1:8000/api/v1/users/login.请求的资源上不存在"Access-Control-Allow-Origin"标头.原产地" 的http://本地主机:8100 "因此不允许访问.
我的服务器允许CORS,因为我已经通过发送邮递员的请求来测试它并且它可以工作.
这是我在前端的代码:
private headers = new Headers({
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
'Access-Control-Allow-Headers': 'X-Requested-With,content-type',
'Access-Control-Allow-Credentials': true
});
postLogin(data) {
console.log(data);
return new Promise((resolve) => {
this.http.post(this.api + "users/login", data, {headers: this.headers})
.map(res => res.json())
.subscribe(answer => {
this.loggedIn = true;
this.token = answer.token;
resolve(answer);
});
});
}
PS:我没有收到GET请求的错误.
我试图放一个代理,它不会改变任何东西:(
这是我的ionic.config.json:
{
"name": "hardShop",
"app_id": "",
"v2": true,
"typescript": true,
"proxies": [
{
"path": "/api",
"proxyUrl": "http://127.0.0.1:8000"
}
] …你好,我在离子2应用程序中有一些页面,里面有一个..像这样
<ion-content padding>
<p>Some text here....</p>
<p>Some other text here...</p>
<ion-img width="180" height="180" src="assets/images/goal.jpg"></ion-img>
<p>bottom text here...</p>
</ion-content>
我需要看到图像水平居中..我已经测试了一些css但没有运气..我怎么能实现这一点？
我正在使用ionic with angular来为Android和iOS创建一个应用程序.在Android上一切正常.iOS是问题(当然).
我正在使用类更改元素ng-class.我可以在HTML和CSS中看到safari检查器中的类更改.但我没有看到屏幕上的变化.我能看到变化的唯一方法是操作CSS选择器(就像打开/关闭一个样式一样简单).
这是带Angular的HTML:
<div class="avatar-view__initial__question question-hide" ng-class="{'question-show': speech.captured === true, 'question-hide': speech.captured === false}">{{question.text}}</div>
和CSS
.avatar-view__initial__question {
text-align: left;
background-color: #E9EBEF;
font-size: 1.5em;
position: relative;
background-image: url(../img/icons/icon-ear.svg);
background-size: 50px;
background-repeat: no-repeat;
background-position: 10px center;
flex-shrink:1;
@extend .css-animate;
&.question-show {
padding: 20px 10px 20px 60px;
height: auto !important;
}
&.question-hide {
height:0 !important;
padding:0 10px 0 60px;
}
}
正如我所提到的,CSS IS被施加,虽然我不能查看更改直到我操纵在检查员的任何样式(关于该元素).
这是一个错误吗？或者我可以解决的事情？
更新 我刚刚在iOS 9设备上试过它,它运行得很好.这似乎是一个十大问题.
更新2我觉得这是一个flexbox问题.我让它们作为一个列填充屏幕,但是当它没有内容时我给了底部一个零高度.这很有趣.我重新格式化了html,使其工作方式不同.但我想保留这个,以防其他人遇到这个问题.
我有一个ion-searchbar,当点击时,打开一个模态.但是,目前这个click过程实际上是两次点击,一次是聚焦,一次是打开模态.我试图添加点击ion-toolbar它包含在其中,并试图禁用ion-searchbar使用[disabled]="true",但禁用的功能不可用ion-searchbar.如何在不必双击的情况下触发新模态打开,并且在原始搜索栏上不会发生焦点？
HTML
<ion-header>
<ion-toolbar >
<ion-searchbar (click)="openSearchModal()"></ion-searchbar>
</ion-toolbar>
</ion-header>
JS
openSearchModal() {
let myModal = this.modalCtrl.create(SearchmodalPage);
myModal.present();
}
版本：
vsce 发布失败并显示以下消息：
正在执行预发布脚本“npm run vscode:prepublish”...
sfdx-command-builder@0.1.0 vscode:prepublish C:\Projects\VS Code Extensions\sfdx-command-builder
npm runcompilesfdx-command-builder@0.1.0 编译 C:\Projects\VS Code Extensions\sfdx-command-builder
tsc -p ./错误命令失败：npm list --生产 --parseable --深度 = 99999 npm 错误！缺失：mkdirp@0.5.1，node-pre-gyp@0.14.0 npm 需要，错误！缺失：minimist@0.0.8，mkdirp@0.5.1 npm 需要，错误！缺少：minimatch@3.0.4，由ignore-walk@3.0.3 npm ERR要求！缺少：brace-expansion@1.1.11，minimatch@3.0.4 npm 需要，错误！缺少：balanced-match@1.0.0，brace-expansion@1.1.11 需要 npm 错误！缺失：concat-map@0.0.1，brace-expansion@1.1.11 需要 npm 错误！缺少：console-control-strings@1.1.0，npmlog@4.1.2 需要 npm 错误！缺失：继承@2.0.4，可读流@2.3.6 npm 所需的错误！缺少：safe-buffer@5.1.2，可读-stream@2.3.6 npm 需要，错误！缺少：safe-buffer@5.1.2，string_decoder@1.1.1 需要 npm 错误！缺少：console-control-strings@1.1.0，gauge@2.7.4 npm 需要，错误！缺少：string-width@1.0.2，gauge@2.7.4 需要 npm 错误！缺少：strip-ansi@3.0.1，gauge@2.7.4 npm 需要，错误！缺少：code-point-at@1.1.0，string-width@1.0.2 npm 需要的错误！缺少：is-fullwidth-code-point@1.0.0，string-width@1.0.2 npm 需要，错误！缺少：strip-ansi@3.0.1，string-width@1.0.2 npm 所需的错误！缺少：number-is-nan@1.0.1，is-fullwidth-code-point@1.0.0 npm 需要，错误！缺少：ansi-regex@2.1.1，strip-ansi@3.0.1 npm 需要，错误！缺少：string-width@1.0.2，wide-align@1.1.3 npm …
我从cli创建了离子项目.离子版本是3.我试图在中心制作标题图像.有人请帮帮我
<ion-menu [content]="content">
<ion-header>
<ion-toolbar color='primary'>
<ion-title>
<img src="assets/imgs/logo.png" width="128" />
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>