我有一个Angular 2应用程序.主屏幕(app?)看起来像这样......
当您单击顶部菜单routerLinks中的项目时,新组件将加载到主视图路由器插座中.其中一个链接加载一个新的"管理"模块/组件,它有自己的路由和新的路由器插座......
然后当您单击左侧导航栏中的routerLinks时,新的管理组件将加载到新的路由器插座中.
但...
Angular 2不允许超过1个路由器插座.因此,单击左侧导航栏中的任何routerLink只会替换整个初始路由器插座视图.
我已经看到使用"bootstrap"加载后续组件的一些SO帖子(更旧,可能已弃用),但我无法让它工作.我甚至不能import { bootstrap } from 'anywhere at all, nothing works'.所以也许这不是这样做的方式.
如何让Admin子应用程序部分工作?
非常非常感谢您分享您的Angular 2专业知识:-)
编辑:尝试以下建议的解决方案.无论我把路由放在哪里,在基础app.routes.ts或子应用程序admin.routes.ts中,无论我如何格式化routerLinks,我都会收到此错误...
再次编辑:这是路由器和模板中的代码......
<!--
============================================================================
/src/app/component/admin/admin.component.html
-->
<!-- Row for entire page columnar dispaly -->
<div class="row">
<!-- Column 1: Left navigation, links to all admin components -->
<div class="col col-md-4">
<app-admin-nav></app-admin-nav>
</div>
<!-- Column 2: Rows of records, click to edit -->
<div class="col col-md-8">
<router-outlet name="admin-app"></router-outlet>
</div>
</div>
// ============================================================================
// /src/app/app.routes.ts
import { ModuleWithProviders …Run Code Online (Sandbox Code Playgroud) 下面骨干collection.fetch代码火灾,由于某种原因,错误,然后跳转到错误处理程序(如预期),但我真的不知道的ErrorHandler PARAMS是什么.错误触发时,模型,xhr和选项参数未定义.我究竟做错了什么?
var onErrorHandler = function(model, xhr, options) {
alert(options);
};
that.collection = new MembersCollection([]);
that.collection.fetch({ success : onDataHandler, error: onErrorHandler, dataType: "jsonp" });
Run Code Online (Sandbox Code Playgroud)
@muistooshort:我完全忘记了js的论点,谢谢你的提示.
这是我发现的......
Arguments[0] = looks like its just the letter "d"
Arguments[1] = is an object. Has readyState, responseText, status, statusText
Arguments[2] = is an object. Exactly the same as [1]
Run Code Online (Sandbox Code Playgroud)
status = 200,文本为"OK".responseText是我期望从PHP服务器模型接收的确切JSON数据.
所以我想现在问题是为什么collection.fetch方法将成功结果发送给错误处理程序?我不相信fetch回调中的那些处理程序的顺序很重要.可以?
我有一个 Typscript 应用程序和 API。我根据大量的 Google 搜索以及在 SO 和其他地方找到的一些示例编写了以下测试。我在测试代码中没有看到任何问题。谷歌搜索TypeError: chai.request is not a function,到目前为止让我现在在哪里。你看到我下面的错误了吗?
谢谢,谢谢,谢谢你的帮助:-)
很难解释这一点.我有一个简单的工作ng2-bootstrap模式示例工作.我将它扩展为包含我的主页的Boostrap 4 Jumbotron示例模板,现在ng2-bootstrap模式什么都不做.我可以看到this.childModal.show()in 子模态组件在按钮单击时被调用,但没有任何反应.Chrome控制台中没有错误,也没有模态显示.我不知道下一步该做什么: - /
// ============================================================================
// /src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ModalModule } from 'ng2-bootstrap/modal';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { DemoModalChildComponent } from './demo-modal-child.component';
@NgModule({
declarations: [
AppComponent, DemoModalChildComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
NgbModule.forRoot(),
ModalModule.forRoot()
],
bootstrap: [AppComponent]
})
export class …Run Code Online (Sandbox Code Playgroud) 打字稿显示[ts]在 VSCode中分配之前使用了属性“记录器”。错误发生在下面的代码中this.logger.logInfo(Important, ...。我很清楚地在构造函数的第二行设置了这个属性,所以......?
如果我使用self代码中显示的var (self.logger.logInfo...),TS 错误就会消失,但这不是必需的。
感谢您分享您的专业知识:-)
// app/data/mongo/_base.data.mongo.ts
import { MongoClient, ObjectId } from 'mongodb';
import { IBaseModel } from '../../model/_base.model';
import { Logger, Important, NotImportant } from '../../util/logger';
export default class BaseData {
constructor(params: any) {
this.collectionName = params.collectionName;
this.logger = new Logger(this.collectionName);
if (this.db) {
this.collection = this.db.getCollection(this.collectionName);
} else {
BaseData.userId = params.user.id;
BaseData.userHandle = params.user.handle;
this.dbServer = params.dbServer;
this.dbPort = params.dbPort || '27017';
this.dbName = params.dbName;
const …Run Code Online (Sandbox Code Playgroud) 如果您使用完全开放/允许所有规则,似乎只能使Firestore规则起作用,并从客户端代码调用.add。
这是一个VueJS应用。在我的main.js中...
// You MUST import these 2 lines exactly so
// to get firebase/firestore loaded and working
import firebase from 'firebase';
import 'firebase/firestore';
import config from '../config/firebase.config.json';
firebase.initializeApp(config);
Vue.config.productionTip = false;
// Define some globals: Available to ALL page vues
Vue.prototype.$http = require('axios');
Vue.prototype.$firebase = firebase;
Run Code Online (Sandbox Code Playgroud)
在我的Login.vue中,我有...
methods: {
loadFirebaseUIAuth() {
const firebaseUIConfig = {
'signInSuccessUrl': '/',
'signInOptions': [
// Leave the lines as is for the providers you want to offer your users.
this.$firebase.auth.GoogleAuthProvider.PROVIDER_ID,
this.$firebase.auth.FacebookAuthProvider.PROVIDER_ID,
this.$firebase.auth.TwitterAuthProvider.PROVIDER_ID,
this.$firebase.auth.GithubAuthProvider.PROVIDER_ID
// …Run Code Online (Sandbox Code Playgroud) firebase-security firebase-realtime-database google-cloud-firestore
angular ×2
typescript ×2
backbone.js ×1
chai ×1
express ×1
fetch ×1
javascript ×1
mocha.js ×1
modal-dialog ×1
node.js ×1